【vue-1】vue-cli3.0以上的搭建与配置(2.X的版本是不一样的)

为什么要使用 vue-cli

　　Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

（以下命令都是在dos窗口执行，徽标键+R，输入cmd进入。）

1.安装node.js

　　官网下载：https://nodejs.org/zh-cn/download/

　　下一步下一步，就OK了。

　　测试是否安装成功，输入node -v，查看版本号。

2.npm（Node Package Manager）包管理器安装

　　npm包管理器是集成在Node.js中了，所以在安装Node.js的时候就已经自带了npm。

　　输入命令：npm -v可得到npm的版本号。

　　输入命令：npm -g install npm，更新npm至最新的版本。

3.npm安装脚手架vue-cli

【

国内使用npm如果不翻墙基本上是没法正常使用的，如果没法翻墙又要用，解决办法只有使用淘宝镜像了
配置是：

npm config set registry https://registry.npm.taobao.org/

切换回来是：

npm config set registry https://registry.npmjs.org/

如果不想直接配置npm，也可以在命令行中配置，在命令的后面添加这一段

--registry=https://registry.npm.taobao.org

如果要查看npm使用哪个源，可以执行命令查看

npm config get registry

另外，有可能转到淘宝源之后项目安装过程中任然会出现node-sass无法安装的情况，这时可以尝试单独设置node-sass

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

】

（官方文档：https://cli.vuejs.org/zh/guide/installation.html）

　　输入安装命令：npm install -g @vue/cli

　　　　　　# or

　　　　　　 yarn global add @vue/cli

　　查看vue-cli安装是否成功：vue --version #or vue -V(V要大写)

　　卸载命令：npm uninstall -g vue-cli

　　乱码，设置打印将默认的GBK改为UTF-8：chcp 65001

(V要大写，如果明明安装明显成功结束，却vue -V出不来或者vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本；那就要检查是不是以管理员的身份打开dos的，如果是以管理员的命令打开，还是没有验证安装成功，运行此命令：set-ExecutionPolicy RemoteSigned 会出现选项，选择Y 或者A都可以)

可以删除C:\Users\byshe\AppData\Roaming\npm\vue.ps1,就不用每次都要用管理员打开了。

4.创建项目执行

（官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create）

　　创建项目命令：vue create 项目名称

　　（警告

如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。不过，如果你仍想使用 vue create hello-world，则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd' 你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。）

选择项目类型

Vue CLI v3.0.0-beta.6

? Please pick a preset: (Use arrow keys)

> xs-default (vue-router, vuex, stylus, babel, pwa, eslint, unit-jest) // 这是我运行过之后的默认设置，第一次执行create是没有的

  default (babel, eslint)

 > Manually select features  //我选的是手动安装  因为不喜欢用eslint 如果实在是不幸装了这个 就在自己配置的vue.config.js里面去加一行代码    lintOnSave:false, 表示关闭格式化检查

// 注：按键盘上下键选择默认（default）还是手动（Manually），

//如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），这里我选择手动，

选择特性支持

? Please pick a preset: Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)

>( ) TypeScript                                 // 支持使用 TypeScript 书写源码

 ( ) Progressive Web App (PWA) Support          // PWA 支持

 ( *) Router                                     // 支持 vue-router

 ( ) Vuex                                       // 支持 vuex

 (* ) CSS Pre-processors                         // 支持 CSS 预处理器。

 ( *) Linter / Formatter                         // 支持代码风格检查和格式化。

 ( ) Unit Testing                               // 支持单元测试。

 ( ) E2E Testing                                // 支持 E2E 测试。

 // 注意：你要集成什么就选就行了（注：空格键是选中与取消，A键是全选）

//打*是我的选的配置

选择css预处理，这里我选择less

? Please pick a preset: Manually select features

? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

 SCSS/SASS

> LESS

  Stylus

选择ESLint + Prettier

? Please pick a preset: Manually select features

? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus

? Pick a linter / formatter config: (Use arrow keys)

> ESLint with error prevention only

  ESLint + Airbnb config

  ESLint + Standard config

  ESLint + Prettier

//这里逃脱不了感觉, 所以最后还是自己配一个vue.config.js吧  然后这里去关闭eslint

选择语法检查方式，这里我选择保存就检测

Vue CLI v3.0.0-beta.6

? Please pick a preset: Manually select features

? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus

? Pick a linter / formatter config: Prettier

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)

>(* ) Lint on save // 保存就检测

 ( ) Lint and fix on commit // fix和commit时候检查

选择单元测试

Vue CLI v3.0.0-beta.6

? Please pick a preset: Manually select features

? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus

? Pick a linter / formatter config: Prettier

? Pick additional lint features: Lint on save

? Pick a unit testing solution: (Use arrow keys)

> Mocha + Chai

  Jest

她会问你，把babel,postcss,eslint这些配置文件放哪，这里随便选，我选择放在独立文件夹

Vue CLI v3.0.0-beta.6

? Please pick a preset: Manually select features

? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus

? Pick a linter / formatter config: Prettier

? Pick additional lint features: Lint on save

? Pick a unit testing solution: Jest

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)

> In dedicated config files // 独立文件放置

  In package.json // 放package.json里

//这两个我都放过 我觉得无所谓吧  看个人习惯

键入N不记录，如果键入Y需要输入保存名字，如第一步所看到的我保存的名字为xs-default

Vue CLI v3.0.0-beta.6

? Please pick a preset: Manually select features

? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus

? Pick a linter / formatter config: Prettier

? Pick additional lint features: Lint on save

? Pick a unit testing solution: Jest

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

? Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置

确定后，等待下载依赖模块

5.启动项目

初始完之后，进入到项目根目录： cd my-project。
启动项目：npm run serve 或者是yarn serve。
在浏览器输入http://localhost:8080就可以看到vue的欢迎界面。

6.打包上线

vue-cli 也提供了打包的命令，在项目根目录下执行： npm run build。
执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

菜鸟程序媛，若有需修正之处，望指正~

WeChat/QQ：2463105280