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相同,問題就這樣愉快地解決了

(后面遇到別的問題會繼續更新!!!)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM