vue-cli建立專案
1.先安裝node,檢查node版本,node -v,安裝vue-cli腳手架,node的版本必須在v4.0以上。如果你安裝的是舊版本的 npm,可以很容易得通過 npm 命令來升級,命令如下:npm install npm-g
2.全域性安裝vue-cli,npm install -g vue-cli,最新的 vue 專案模板中,都帶有 webpack 外掛。檢vue是否安裝成功,vue,用vue list可以檢視vue有哪些可以安裝的模板
z
3.用vue-cli構建專案
首先需要在命令列中進入到專案目錄,然後建立一個基於 webpack 模板的新專案:vue init webpack sell
其中
webpack 是模板名稱,sell是自定義的專案名稱,命令執行之後,會在當前目錄生成一個以該名稱命名的專案資料夾。
4.安裝成功。以下就是vue+webpack的模板
其自動生成的基礎檔案:
├── build // webpack/node配置檔案 │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config // 環境配置檔案 │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── node_modules // npm包檔案 ├── src // 靜態資原始檔 │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Hello.vue │ ├── router │ │ └── index.js │ ├── App.vue │ └── main.js ├── static ├── .babelrc // babel配置檔案 ├── .gitignore // gitignore忽略檔案 ├── .editorconfig // 編碼風格配置檔案 ├── .postcssrc.js // postcss配置檔案 ├── package.json // node包管理檔案 ├── index.html // 首頁模板 ├── package.json // 包管理檔案 └── README.md // 描述檔案
5.執行npm install,安裝依賴模組,如果速度很慢,可以使用淘寶定製的 cnpm (gzip 壓縮支援) 命令列工具代替預設的 npm,可以以下方法解決(windows使用管理員身份進行安裝)
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
6.執行npm run dev執行模板,啟動專案。建議更改下埠號,config----index.js,裡面的port埠改為和其他埠不一樣就可以了。
測試環境是否搭建成功:
在專案所在目錄下按Shift並隨處右擊後點擊選單中的“在此處開啟命令視窗(W)”,在彈出的命令窗口裡輸入:npm run dev,然後在瀏覽裡輸入:localhost:8080(預設埠為8080)
執行成功的介面
注意1:8080就是預設的埠,在瀏覽器位址列中輸入localhost:8080會發現預設的模組打開了!
(這裡又會遇到過問題,就是8080埠被佔用了,解決方法是,cmd命令輸入netstat -ano找到8080埠的PID,然後開啟“工作管理員”,找到對應的PID,將該程序給關了即可)
注意2:要想在本地瀏覽頁面效果,npm必須執行。如果已經關閉,需要在專案所在目錄下按Shift並隨處右擊後點擊選單中的“在此處開啟命令視窗(W)”,在彈出的命令窗口裡輸入:npm run dev;
注意3:如果想在伺服器端執行網頁,先在npm中將網站打包,打包命令 npm run build;
注意4:想在npm執行打包命令,要先“ctrl+c”終止npm正在執行的批處理操作;
附加1:如果執行別人的vue.js專案demo
可以從github上克隆下來,然後將專案資料夾放到某個碟符下,然後cmd命令 找到該碟符,比如 f:
f:\cd demo_vue
命令 cnpm(npm) install //在本地安裝
最後 cnpm(npm) run dev 回車 //在本地的瀏覽器開啟127.0.0.1帶上埠號就可以跑起來了。
附加2:打包上線
自己的專案檔案都需要放到 src 資料夾下;
專案開發完成之後,可以輸入 npm run build 來進行打包工作;
打包完成後,會生成 dist 資料夾,如果已經修改了檔案路徑,可以直接開啟本地檔案檢視;
專案上線時,只需要將 dist 資料夾放到伺服器就行了。
*************************************專案檔案的解讀***************************************
bulid和config是 webpck配置相關
node_modules資料夾:是npm install安裝的依賴程式碼庫
src資料夾:存放原始碼
static:存放第三方靜態資源的,static裡面的.gitkeep,如果為空,也可以提交到gitHub上面,正常情況下,是不可以提交的。
.babelrc:把es6檔案編譯成es5
.babelrc檔案 { "presets": ["es2015", "stage-2"],//表示預設,表示babelrc轉換預先需要安裝的外掛 "plugins": ["transform-runtime"],//把es6的方法做轉換 "comments": false //false表示轉換後代碼不生成註釋 }
.editorconfig:編輯器的配置
.editorconfig charset = utf-8 //編碼 indent_style = space //縮排風格,基於空格做縮排 indent_size = 2 //縮排大小是2格 end_of_line = lf //換行符的風格 insert_final_newline = true //當你建立一個檔案,會自動在檔案末尾插入新行 trim_trailing_whitespace = true //自動移除行尾多餘空格
.eslintignore 忽略語法檢查的目錄檔案
就是忽略對build/*.js和config/*.js的語法檢查
.eslintrc.js eslint的配置檔案
package.json對專案的描述
{ "name": "sell", "version": "1.0.0", "description": "sell app", "author": "", "private": true, "scripts": { /*表示可以執行一些命令,例如:npm run dev會執行node build/dev-server.js,npm run build會執行node build/build.js,因此可以通過scripts配置指令碼*/ "dev": "node build/dev-server.js", "build": "node build/build.js", "lint": "eslint --ext .js,.vue src" }, "dependencies": { /*專案的依賴*/ "vue": "^2.2.2", "vue-router": "^2.2.0" }, "devDependencies": { //編譯需要的依賴 ....................... }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }
index.html是專案的入口,入口js是main.js。
專案中的依賴都是通過npm來管理的,而npm對於專案的管理,則是通過package.json檔案,使用npm init安裝package.json檔案。
記住:每次開啟專案,要執行npm run dev。