一.環境搭建
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相同,問題就這樣愉快地解決了
(后面遇到別的問題會繼續更新!!!)