简单搭建vue2.0+webpack项目

2020-03-16  本文已影响0人  _红桃K

创建文件夹,通过\color{black}{vscode}打开文件,在编辑器命令窗口执行以下命令:

全局安装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 插件,接下来安装 \color{green}{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

剩下的就是根据需求开发项目了

上一篇 下一篇

猜你喜欢

热点阅读