安装vue脚手架@vue/cli 4.5.13(稳定版)

若 NPM 下载过慢,请参考本处改换镜像源:Here

首先新建一个 vue 测试项目,还记得以前自己是用 vue-cli 2.0的版本 去构建的,毕竟里面有默认配置好的webpack配置,但现在很多小伙伴都已经用最新的 @vue/cli 4+ 版本去开发了,因为 @vue/cli 3 以上 的版本,比 2.0 的配置文件简洁了很多,当然你还得跟上时代的脚步,不然你就被淘汰了。

但自己搭建过的小伙伴都应该知道, @vue/cli 3@vue/cli 4 默认没有vue.config.js文件,所以需要自己来创建配置。在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置,因为项目的配置比较多,这里就不分别介绍了,可以访问官方文档

这里给出一个基本的:

module.exports = {
  publicPath: "./",      // 公共路径(必须有的)
  outputDir: "dist",     // 输出文件目录
  assetsDir: "./static", // 静态资源存放的文件夹(相对于ouputDir) 一般都是static目录,不然默认的会是assets
  lintOnSave:false,      // eslint-loader 是否在保存的时候检查(果断不用,这玩意儿我都没装)
  runtimeCompiler: false,// 我用的only,打包后小些
  productionSourceMap: true, // 在生产环境会生产.map文件 设置false可以减小dist文件大小,加速构建
  devServer: {
    open: true,  // npm run serve后自动打开页面
    host: 'localhost',
    port: 8085, // 开发服务器运行端口号
    // hotOnly: true, // 热更新,
    // proxy: {
    //   '/api': {
    //     target: '127.0.0.1',
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '^/api': ''
    //     },
    //   },
    // },
  },
  chainWebpack: () => {},
  configureWebpack: () => {},
}

一、安装

如果在电脑上已经安装了 vue-cli 2.0 或者 @vue/cli 3 的话需要先卸载再重新安装

简要说明 vue-cli 2.0 @vue/cli 3
安装 npm install -g vue-cli npm install -g @vue/cli
卸载 npm uninstall -g vue-cli npm uninstall -g @vue/cli

安装指定版本 🎈

npm install -g @vue/cli@4.5.13

查询可用包的版本号

npm view @vue/cli versions --json

版本查询 (检测是否安装成功)

vue -V

通过上面的步骤就可完成 @vue/cli 4.5.13 的安装。

二、创建项目

vue create 项目名称   (*必须是英文,不允许大写,必须是小写英文) 

利用方向键 上、下来选择配置信息,点击回车进入下一步

(可以用上下键选择的忽略这步骤)如果在git Bash中不能用上下箭头选择,找到git 安装目录中 bash.bashrc 文件

然后在文件最底部加上 alias vue='winpty vue.cmd'

关闭再重新打开 git Bash 就可以上下选择啦 😎 🤣 😁

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version                         //  选择Vue版本
 (*) Babel                                      //  代码编译
 ( ) TypeScript                                 //  ts
 ( ) Progressive Web App (PWA) Support          //  支持渐进式网页应用程序
 (*) Router                                     //  vue路由
 ( ) Vuex                                       //  状态管理模式
>( ) CSS Pre-processors                         //  css预处理
 ( ) Linter / Formatter                         //  代码风格、格式校验
 ( ) Unit Testing                               //  单元测试
 ( ) E2E Testing                                //  端对端测试

空格键 进行配置,然后 回车 进入下一步

这里我选择的是 vue2.x

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

选择是否使用路由 history router,我这里选择 是

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

我选择 Less 编译方式

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json

选择 package.json

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) n

是否保存当前选择的配置项,如果当前配置是经常用到的配置,建议选择y存储一下当前配置项。如果只是临时使用的话就不需要存储了,根据自己情况而定啦。

但是我是之前已经配置保存了,所以这里 我选 n

三、运行项目

项目创建完毕,打开文件夹

cd vue
npm run serve # 启动 vue 项目

posted @ 2023-02-17 10:22  RioTian  阅读(763)  评论(0编辑  收藏  举报