創建文件夾,通過打開文件,在編輯器命令窗口執行以下命令:
全局安裝webpack
(mac端+sudo) npm install -g webpack
全局安裝webpack-cli
(mac端+sudo) npm install -g webpack-cli
安裝vue-cli腳手架
npm i -g vue-cli
創建webpack項目
vue init webpack
接下來選擇第一個默認的
recommended for most users
然后回車:
? Generate project in current directory? Yes
? Project name testproject
? Project description zanwu
? Author yhao
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
使用淘寶NPM鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝依賴
cnpm install
然后運行查看結果:
npm run dev
出現vue頁面說明初始項目成功.
我習慣性用餓了么的 element-ui 插件,接下來安裝 插件,方便快捷開發:
cnpm i element-ui -S
這里是完整引入element-ui組件,在main.js文件中寫入以下內容:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
安裝less,如果安裝報錯,先將node_modules文件夾刪掉再執行
npm install --save-dev less-loader less
在webpack.base.conf.js中rules里配置
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
}
安裝vuex
npm install vuex --save
安裝axios
npm install axios --save
剩下的就是根據需求開發項目了