vue-cli 3.0脚手架创建vue项目

时间:2023-03-10 03:43:44
vue-cli 3.0脚手架创建vue项目

1. 卸载vue-cli 2.0

npm uninstall -g vue-cli

2. 安装vue-cli 3.0

npm install @vue/cli

3. 创建项目

npm create <项目名>

4. 如果创建出现如下错误: Unexpected end of JSON input while parsing near '...ownload/webpack-0.3.2',则继续下面的步骤。

5. 执行下面两个操作

(1)npm install --registry=https://registry.npm.taobao.org

(2)npm cache clean --force

(3)删除原来创建的项目文件,重新执行第3条命令 npm create <项目名>

6. 执行npm run serve,即可启动服务,可通过浏览器打开页面链接

成功创建的项目目录结构如下:

vue-cli 3.0脚手架创建vue项目

7.  可根据需要在项目根目录添加vue.config.js配置文件,并输入如下内容:

 1 module.exports = {
2 // 基本路径
3 publicPath: '/',
4 // 输出文件目录
5 outputDir: 'dist',
6 // 用于嵌套生成的静态资产(js,css,img,fonts)的目录。
7 assetsDir: '',
8 // 以多页模式构建应用程序。
9 pages: undefined,
10 // eslint-loader 是否在保存的时候检查
11 lintOnSave: true,
12 // 是否使用包含运行时编译器的Vue核心的构建。
13 runtimeCompiler: false,
14 // 默认情况下babel-loader忽略其中的所有文件node_modules。
15 transpileDependencies: [],
16 // 生产环境sourceMap
17 productionSourceMap: true,
18 // webpack配置
19 configureWebpack: () => {},
20 chainWebpack: () => {},
21 // css相关配置
22 css: {
23 // 启用 CSS modules
24 requireModuleExtension: false,
25 // 是否使用css分离插件
26 extract: true,
27 // 开启 CSS source maps?
28 sourceMap: false,
29 // css预设器配置项
30 loaderOptions: {},
31 },
32 // webpack-dev-server 相关配置
33 devServer: {
34 host: '0.0.0.0',
35 port: 8080,
36 https: false,
37 hotOnly: false,
38 proxy: null, // 设置代理
39 before: app => {}
40 },
41 // enabled by default if the machine has more than 1 cores
42 parallel: require('os').cpus().length > 1,
43 // PWA 插件相关配置
44 pwa: {},
45 // 第三方插件配置
46 pluginOptions: {
47 // ...
48 }
49 }