vue與ElementUI項目創建一

1、下載安裝node.js  

https://nodejs.org/zh-cn/download/

安裝完成后cmd查看

node -v

npm -v

是否已經安裝成功

2、創建ElementUI工程

① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git 下載官方提供的模板， 

② 使用 cnpm intsall 下載依賴的模塊（沒有淘寶鏡像 cnpm 可以使用npm install） 

③ 使用npm run dev 運行項目

 

 

進入項目根目錄，運行npm install ，如果運行速度慢可以使用npm依賴包在國內由阿里雲提供的鏡像npm install --registry=http://registry.npm.taobao.org

安裝結束之后可以可看到目錄下多了一個node_modules文件夾，這就是依賴包所在，如果想添加更多依賴包，就繼續使用上文指令，如加入vue-router，可以使用如下指令

npm install vue-router --save

3、工程打包運行

安裝好依賴后，進入文件根目錄，運行  npm run dev 

關於本地服務器的配置信息，在工程根目錄的webpack.config.js中，我們可以在該文件中看到如下代碼段：

devServer: {
    host: '127.0.0.1',
    port: 8010,
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

這里的配置信息寫的很清楚，本地的服務器端口為8010，如果我們想改變端口號或主機名，只要改變這里對應的字段即可。 
我們輸入npm run dev后，會出現一長串信息，最后會出現webpack: Compiled successfully的字樣，代表我們的代碼編譯成功。這時我們打開瀏覽器，輸入localhost:8010，出現如圖所示的網頁，表示我們的第一個Vuejs2.0 ＋ElementUI工程已經成功運行。
如下圖：

 

 

 

 至此一個簡單的基於VueJs2.0和ElementUI的前端網站的雛形已經完成了，以后會陸續更新遇到的問題。

參考來源：https://blog.csdn.net/xuehu837769474/article/details/81984937