1.初始化環境準備
1.1 設置淘寶加速代理
npm config set registry https://registry.npm.taobao.org
查看是否設置成功
npm config ls
1.2 安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
1.3 安裝webpack
npm install webpack -g
1.4 安裝vue
npm install vue
2.安裝vue-cli
2.1 全局安裝
這樣會直接安裝3.x版本
npm install -g @vue/cli
vue -V / vue --version
拉取2.x舊版本
npm install -g @vue/cli-init
2.2 檢測是否安裝成功
vue -v
2.3 查找可用模板
vue list
3.創建項目
使用模板
vue init webpack-simple vue-cli-demo
進入項目目錄
cd vue-cli-demo
安裝項目依賴
vue install
dev運行項目
vue run dev
生產環境下
將項目打包輸出
npm run build
4.安裝vue-route
npm install vue-router --save
5.安裝axios
npm install axios --save
6.安裝vuex
npm install vuex --save
7.安裝element-ui
npm install element-ui -S
8.安裝style-loader
由於默認不安裝這個，如果要使用element-ui需要單獨安裝
npm install style-loader -D
9.安裝less-loader
如果需要自定義樣式的話
npm install less less-loader -D
10.webpack.config.js
需要配置如下loader:
{
test: /\.less$/,
loader: 'less-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}
--save：將保存配置信息到pacjage.json的dependencies節點中。
--save-dev：將保存配置信息到pacjage.json的devDependencies節點中。
dependencies：運行時的依賴，發佈後，即生產環境下還需要用的模塊
devDependencies：開發時的依賴。裏面的模塊是開發時用的，發佈時用不到它。