vue項目環境搭建及運行

一.環境搭建

1.安裝node.js（window10）

下載完直接安裝，下一步。。。

安裝好node，能夠先進行下簡單的測試安裝是否成功了，後面還要進行環境配置
在鍵盤按下【win+R】鍵，輸入cmd，而後回車，打開cmd窗口

2.安裝cnpm

因爲npm有些資源被屏蔽或者是國外資源的緣由，常常會致使用npm安裝依賴包的時候失敗，因此還須要npm的國內鏡像---cnpm
在命令行中輸入

npm install -g cnpm --registry=[http://registry.npm.taobao.org](http://registry.npm.taobao.org/)

3.安裝webpack

webpack是一款模塊加載器兼打包工具，它能把各類資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都做爲模塊來使用和處理。 webpack 的核心是 依賴分析,把依賴分析出來了，其餘都是細枝末節。

npm install webpack -g

4.安裝vue-cli

vue-cli是vue.js的腳手架，用於自動生成vue.js+webpack的項目模板
，這個過程會耗時十幾秒，等走完就好；到此整個環境搭建好

cnpm install vue-cli -g

二.運行項目

一個比較典型的用webpack管理的vue項目應該有以下文件和文件夾：
config/：定義代理的域名
dist/: 整個前端項目用webpack打包後的目標存放文件夾，裏面通常有build.js文件
lib/: 開發時引用的一些依賴文件，最經典的就是jquery
node_modules/：用npm對項目依賴組件進行安裝時就放在這個文件夾裏。
src/：本身寫的源代碼
index.html：主頁入口文件
package.json和webpack.config.js：這兩個文件應該是組件依賴關係和管理打包的配置文件？不太懂，反正沒有是不能cnpm install、cnpm run build、cnpm run dev的。

1.cd desktop/項目名稱 或者在vsc終端打開

2.進入項目以後安裝依賴

npm install

3.輸入命令「npm run dev」，此時會用nodejs啓動這個前端的vue項目

三.可能會出現的報錯

（記錄一些遇到的報錯及解決方法）

1.域名問題

一開始沒看上面，不停百度webpack-dev-server --inline --progress --config build/webpack.dev.conf.js，根據網上解決方法，總覺得是webpack的版本問題，一直卸了裝，裝了卸，還有npm install也一直刪了從新下載，最後解決辦法：找到config文件裏面的index.js文件，把host地址改爲本身本機的或者localhost（由於是下載的別人寫的項目，若是他配置的不是loaclhost，而是本身本機域名，就會監聽不到，致使報錯）

———————————————————————————————————————————————

2.vue版本和vue-template-compiler的衝突問題

這是vue版本衝突問題，可是，主要問題不是vue-loader和vue-template-compiler的衝突，而是vue和vue-template-compiler的衝突，因此，我將vue版本修正爲與vue-template-compiler相同，問題就這樣愉快地解決了

（後面遇到別的問題會繼續更新！！！）