vue3.0脚手架搭建-CSDN博客

今年8月，vue已经升级到3.0，按照官方文档搭建一个vue3.0的模板

如果你已经安装了vue2.9.6的话，需要先将其删除，删除命令：npm uninstall -g vue-cli

删除成功，Vue CLI 需要 Node.js 8.9 或更高版本，所以在安装新的脚手架的时候先检查下node的版本，命令行中输入： node -v即可看到。

2.安装新的vue cli包，命令为：npm install -g @vue/cli

安装完成后使用命令：vue -V检查是否安装成功，注意此处-V是大写的。

3.安装成功后就可以用它来构建项目了，在命令行中输入：vue create projectName

在这里，你可以选择项目配置，可以选择默认值或者自己配置。选择默认配置后将直接安装。

选择自定义配置，会看到如下配置项，空格控制选中，回车确定：

之后还有选择路由history模式，css预处理语言，何处存放配置文件等等，按照项目需要选择即可。

4.选择完成后，开始安装

安装完成。

5.输入提示命令运行项目

这样就搭建成功了，与vue2.0项目结构有些不同，没有了build和config文件夹，官方文档上面说想要配置的话，需要在项目根目录下创建一个vue.config.js文件。

配置语法：

module.exports = {
 // 基本路径
 baseUrl: '/',
 // 输出文件目录
 outputDir: 'dist',
 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,
 // use the full build with in-browser compiler?
 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
 compiler: false,
 // webpack配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // vue-loader 配置项
 // https://vue-loader.vuejs.org/en/options.html
 vueLoader: {},
 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: true,
 // css相关配置
 css: {
  // 是否使用css分离插件 ExtractTextPlugin
  extract: true,
  // 开启 CSS source maps?
  sourceMap: false,
  // css预设器配置项
  loaderOptions: {},
  // 启用 CSS modules for all css / pre-processor files.
  modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require('os').cpus().length > 1,
 // 是否启用dll
 // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
 dll: false,
 // PWA 插件相关配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server 相关配置
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  proxy: null, // 设置代理
  before: app => {}
 },
 // 第三方插件配置
 pluginOptions: {
  // ...
 }
}
复制代码