vue-cli 4.0构建vue项目

vue-cli 4.0构建vue项目

一、安装vue-cli脚手架

1 检查是否已经安装vue-cli及版本 vue -V命令

版本低于4.0需要先卸载 再全局安装

卸载命令 cnpm uninstall -g vue-cli

重新安装 cnpm install -g @vue/cli

安装完成之后检查是否安装成功

PS C:\Users\WX> vue -V
@vue/cli 4.5.10

二、使用vue-cli 4.0新建vue项目

以项目位于D:\workspace\vue文件夹下,创建一个项目名称为hello-vue的vue项目为例

PS C:\Users\WX> d:
PS D:\> cd D:\workspace\vue
PS D:\workspace\vue> vue create hello-vue

?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

提示npm镜像速度有点慢,是否使用淘宝cnpm镜像,这里选择是,输入Y 

输入Y,回车,提示信息如下

意思是选择一些预设preset(功能性插件), 通过键盘方向键选择

Default ([Vue 2] babel, eslint)             基于vue2.0,当前稳定发布版本,所以选择默认的话就选第一个

Default (Vue 3 Preview) ([Vue 3] babel, eslint)      基于vue3.0,尝鲜版

Manually select features    手动选择,这里演示手动选择,提示如下

默认选择了3个,根据需要自行选择即可(通过键盘的方向键+space选中/取消选中) 

这里简要说明一下各个选项作用,深入了解单独百度:

Choose Vue version     后续步骤提示你选择vue版本,就是上面的那个Default ([Vue 2] babel, eslint)和Default (Vue 3 Preview) ([Vue 3] babel, eslint)

babel   js代码编译器,兼容ES5/6/7代码,如兼容import/export/async await/promise等代码

typescript   支持typescript

pwa     渐进式网页应用

router    vue路由

vuex   状态管理,如token,浏览偏好等

CSS Pre-processors    支持scss/sass/less等

Linter / Formatter   代码格式规范

Unit Testing   单元测试

E2E Testing  黑盒测试

我们这里选择Choose Vue version   /babel   /router   /vuex   /Linter / Formatter   

选择之后,继续提示选择版本,我们选择2.x,然后提示如下:

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

由于上面的preset列表我们选择了router ,这里询问我们路由方式,选择Y 使用history mode,该模式浏览器前进,后退都可以用,路径中没有#

选择代码检验模式 

ESLint with error prevention only 只配置使用 ESLint 官网的推荐规则 这些规则在这里添加链接描述
ESLint + Airbnb config 使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置 Airbnb
的规则在这里添加链接描述 ESLint + Standard config 使用 ESLint 官网推荐的规则 + Standard
第三方的配置 Standard 的规则在这里 添加链接描述 ESLint + Prettier 使用 ESLint 官网推荐的规则 +
Prettier 第三方的配置 Prettier     该模式使用居多

选择什么时候进行代码校验,Lint on save 保存就检查,Lint and fix on commit   fix 或者 commit 的时候检查,建议第一个

 

 

 如何存放配置,In dedicated config files 存放到独立文件中,In package.json 存放到 package.json 中

 

? Save this as a preset for future projects? (y/N)  是否保存本次的配置,N 不记录,如果选择 Y 需要输入保存名字,一般不保存

至此,项目构建完成

 

三、启动服务

新建的项目,package.json中,scripts字段如下:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

控制台通过cnpm run server启动项目

vue-cli-service server实际启动了webpack-dev-server,对比vue2.0,"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

vue-cli-service server也可以携带参数,用法:vue-cli-service serve [options] [entry]

Usage: vue-cli-service serve [options] [entry]

Options:

  --open         open browser on server start
  --copy         copy url to clipboard on server start
  --mode         specify env mode (default: development)
  --host         specify host (default: 0.0.0.0)
  --port         specify port (default: 8080)
  --https        use https (default: false)
  --public       specify the public network URL for the HMR client
  --skip-plugins comma-separated list of plugin names to skip for this run

我们一般在项目根目录新建一个vue.config.js 配置文件,通过devServer配置上面的options

devServer: {

    open: true, // 启动成功后自动打开浏览器页面

    host: '0.0.0.0', // 匹配本机IP地址(默认是0.0.0.0)

    port: 8888, // 开发服务器运行端口号

    ...

}

四、vue 4.0对比vue 2.0变动

1 index.html :

  vue cli 2 :“index.html ” 

  vue cli 3/4 :“public/index.html ”此模板会被 html-webpack-plugin 处理的

2 去掉 static  、 新增 public 文件夹

  vue cli 2 :static 是 webpack 默认存放静态资源的文件夹,打包时会直接复制一份到dist文件夹不会经过 webpack 编译 

  vue cli 3/4  :摒弃 static 新增了 public 。vue cli 3 中“静态资源”两种处理方式:

  经webpack 处理:在 JavaScript 被导入或在 template/CSS 中通过“相对路径”被引用的资源会被编译并压缩

  不经webpack 处理:放置在 public 目录下或通过绝对路径被引用的资源将会“直接被拷贝”一份,不做任何编译压缩处理

3 src/views:

  vue cli 3/4 的 src文件夹 新增 views文件夹 用来存放 “页面”,区分 components(组件)

4 去掉 build(根据config中的配置来定义规则)、config(配置不同环境的参数)文件夹 :

   vue cli 3/4 中,这些配置 你可以通过 命令行参数、或 vue.config.js (在根目录 新建一个 vue.config.js 同名文件)里的 devServer 字段配置开发服务器

5 babel.config.js:

        vue cli 2:通过build文件夹下的webpack配置文件配置

  vue cli 3/4:配置Babel 。Vue CLI4 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同,这个配置文件不会使用基于文件位置的方案,而是会一致地运用到项目根目录以下的所有文件,包括 node_modules 内部的依赖。官方推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。

 

最后,附一个vue.config.js配置文件,网上很多,更多配置详情参见官网:https://cli.vuejs.org/zh/config/

module.exports = {
  publicPath: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist'',构建之前会被清除)
  assetsDir: '',//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  indexPath: 'index.html',//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  pages: {//pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
    index: {//除了 entry 之外都是可选的
      entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
      template: 'public/index.html',// 模板来源
      filename: 'index.html',// 在 dist/index.html 的输出
      title: 'Index Page',// 当使用 title 选项时,在 template 中使用:<title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块,默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
    },
    subpage: 'src/subpage/main.js'//官方解释:当使用只有入口的字符串格式时,模板会被推导为'public/subpage.html',若找不到就回退到'public/index.html',输出文件名会被推导为'subpage.html'
  },
  lintOnSave: true,// 是否在保存的时候检查
  productionSourceMap: true,// 生产环境是否生成 sourceMap 文件
  css: {
    extract: true,// 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false,// 开启 CSS source maps
    loaderOptions: {},// css预设器配置项
    modules: false// 启用 CSS modules for all css / pre-processor files.
  },
  devServer: {// 环境配置
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    open: true, //配置自动启动浏览器
    proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  },
  pluginOptions: {// 第三方插件配置
    // ...
  }
};

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值