创建文件夹,通过打开文件,在编辑器命令窗口执行以下命令:
全局安装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
剩下的就是根据需求开发项目了