Vue--vue-cli使用

Vue-cli使用

现在使用前端工程化开发项目是主流的趋势，也就是说，我们需要使用一些工具来搭建vue的开发环境。一般情况下我们都会选择使用webpack进行项目的构建，在这里我们直接使用vue官方提供的，基于webpack的脚手架工具进行项目开发。

注意： 要求node.js版本是8+

安装方法

全局安装vue-cli:

npm install -g @vue/cli

or

yarn global add @vue/cli

检测安装：

vue -V

脚手架创建项目

vue create 项目名称

这里如果你是第一次使用脚手架进行项目创建的话，是只有两项提示。

第一项是默认配置，我们一般选择第二项自定义配置进行项目构建。

我们可以自由的选择哪些配置，按键盘上下键进行选中，安装。

选中哪一个，通过键盘空格键确定，所有的都选择完毕后，按键盘的Enter键进行下一步。

需要注意的是：模板创建的时候会询问需要使用EsLint来标准化我们的代码规范

https://www.cnblogs.com/mingjian/p/9361027.html

单文件组件

vue中的单文件组件包含三部分：template script style

内部配置wepack的vue-loader来去解析处理解析以.vue为后缀名的单文件组件

• style标签 加上scoped属性，css局部生效

  scoped穿透问题！

• style标签 加上lang=“scss”，支持scss

注意：

1) 关闭eslint

​ 如果当前项目使用了eslint，并且需要关闭。需要创建vue.config.js文件，采用如下代码：

​

module.exports = {
    devServer: {
        overlay: {
          warnings: false,
          errors: false
        }
    },
    lintOnSave:false //直接关闭eslint检查
}

2) proxy代理配置

devServer: {
	 open:true, //自动开启浏览器
     port:8000, //随便改端口号
     proxy: {
         '/api': {
             target: 'https://*.*.com',
             host: '*.*.com',
             changeOrigin:true
         }
     }
}

3) alias别名配置

configureWebpack: {
    resolve: {
        alias: {
            'assets': '@/assets',
            'con': '@/components',
            'views': '@/views',
        }
    }
}

4) 打包路径配置

// 基本路径
publicPath: '/vue-demo'