美文网首页
简单搭建vue2.0+webpack项目

简单搭建vue2.0+webpack项目

作者: _红桃K | 来源:发表于2020-03-16 14:56 被阅读0次

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

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

    相关文章

      网友评论

          本文标题:简单搭建vue2.0+webpack项目

          本文链接:https://www.haomeiwen.com/subject/hzftoctx.html