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。

webpack原理