简单搭建vue2.0+webpack项目

创建文件夹,通过\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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容