web前端: vue-cli 3.0 入门介绍

最近老大让负责一个移动端webapp的前端部分，可是我以前都没有做过移动端的开发/(ㄒoㄒ)/~~。老大难道是锻(shi)炼(le)我(zhi)。

image.png

最后定下来vue做技术栈，这时候就要用最新的vue-cli 3.0来做脚手架搭建项目，下面来给大家做个入门介绍，希望能够帮助到大家~

• 介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。简而言之，如果你想用vue作为前端的技术栈，可以直接用vue cli进行搭建一个项目框架，然后在里面写业务组件即可，可以省去大量的搭建项目框架的时间，最新的vue cli3.0尤为如此。
详细可见官网https://cli.vuejs.org/zh/guide/

• 环境安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

当安装成功后可以通过这个命令来检查其版本是否正确 (3.x)：

vue --version

注意:

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

• 创建一个项目

运行以下命令来创建一个新项目：

vue create hello-world

执行后会出现下面这样的界面:

image.png

解释一下:
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

这里:vue-cli3.0在你创建后会有一个保存当前配置的功能,所以前面两项都是我之前手动选择特性后保存的。第一次vue create的时候肯定是没有的。

这里我们选择最后一项，即“手动选择特性”选择需要的设置(移动到最后一项，然后按回车确定)。

• 配置项目插件和功能

上面回车后会出现:

image.png

这里需要集成什么 就选就行了(按空格键选中)。
选中之后还会有些选项:
这里我选scss

image.png

这里我选ESlint + Prettier

image.png

这里选择语法检查的方式 保存就检查 还是fix和commit时候检查，我就默认选第一个了

image.png

这里是把babel,postcss,eslint这些配置文件放哪
1.独立文件放置
2.放package.json里
个人喜好，我选了第一个

image.png

最后就是选择 是否记录一下？ 下次继续使用这套配置 ，这里咱就不存了，存多了不知道怎么删除/(ㄒoㄒ)/~~

稍等一波，就装好了

image.png

• 项目文件分析
  整体目录精简了不少

  
  
  

  image.png
  
  

  从图中可以看出已经没有了之前webpack配置的文件，这个时候如果要进行相关的配置，需要在根目录下创建vue.config.js,然后在里面进行相关的配置，这一点要注意。

  
  
  

  image.png

vue.config.js里
大概包括了配置 常用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第三方插件等等
详细配置可以看官方文档 详细config配置

• webpack常用配置
  这里我列举一些常用的webpack配置，可以直接copy到vue.config.js，供大家参考

1.port
这里我先改个端口, 修改vue.config.js 然后重新启动工程 , 可以看到已经改成8081端口了

module.exports = {
  lintOnSave: false,
  devServer: {
    port: 8081
  }
}

2.alias(别名)

module.exports = {
  // chainWebpack是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('common', resolve('src/common'))
      .set('api', resolve('src/api'))
  }
}

3.跨域代理

module.exports = {
devServer: {
    // 跨域代理
    proxy: {
      '/api': {
        target: 'http://xxxxxx.com', // 接口的域名
        // secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

......
以上是简单的配置，如果需要更多webpack配置可以参考
1.webpack中文文档
2.vue-cli3配置参考

最后，觉得这篇文章有用的记得点个赞再走哦~

傲娇ing