vue-cli3搭建（新手小白）

一、介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：

CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）

CLI 插件：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等）

二、安装

node.js版本为8.9+；

　　安装模块：npm install -g n // 安装模块 这个模块是专门用来管理node.js版本的；

　　若原先已经安装，则更细模块：n stable // 更新你的node版本；

　　若事先安装了vue-cli，则先卸载：npm uninstall vue-cli -g；

　　若安装了cli3,后还想用vue-cli2，全局安装一个桥接工具：

　　npm install -g @vue/cli-init//安装完后 就还可以使用 vue init 命令

       vue init webpack my_project

1、全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

2、Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本）。

node -v

就会像这样显示出node环境的版本

如果没有node环境，到https://nodejs.org/en/中，下载node

 一直点击next就安装完成了，

（2）下载安装nodeJs，中文官方下载地址：http://nodejs.cn/download/ 

3、安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli） 

npm install -g @vue/cli 

cnpm install -g @vue/cli //或者 yarn global add @vue/cli

vue --version   检查vue版本号

三、使用

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

如果没有配置保存过，则只有以下两个选项：

② default（babel，eslint）：默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包

③ Manually select features：自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包

我们选第二项 回车后

 1 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 2 >( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
 3 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
 4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
 5 ( ) Router // vue-router（vue路由）
 6 ( ) Vuex // vuex（vue的状态管理模式）
 7 ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
 8 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
 9 ( ) Unit Testing // 单元测试（unit tests）
10 ( ) E2E Testing // e2e（end to end） 
测试选择之后一直回车就行了

四、没有手动配置项

vue ui

 

之后也可以重复上面的步骤进行增加

下次创建直接用配置

这样就完成了，对比一下，在重复三、使用的时候就会有了之前没有手动的了，（图一是磨人的时候，图二是配置之后的）

五、vue.config.js配置

module.exports = {
    configureWebpack: {
        devtool: 'source-map',
        devServer: {
            port: 7000,//配置服务端口号
            open: true,//配置启动时，自动打开终端网站
        }
    },
}

 

 

参考的原始文章：https://www.cnblogs.com/coober/p/10875647.html