Vue入门（1.1）图文讲解搭建 vue 3.0项目

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。
如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

第一步 安装node

先查看电脑上是否已经安装了node
cmd 打开控制命令行，输入 node -v 查看当前的node版本号，如果提示‘node 不是内部命令…’表示没有安装
在官网下载node.js，然后默认安装，即可。在安装完成之后也可再查看一下版本号。

第二步 如果之前全局安装了旧版本的 vue-cli(1.x 或 2.x)，需先卸载了它

卸载：
npm uninstall vue-cli -g
或者是
yarn global remove vue-cli

第三步 nrm 安装

全局安装 nrm

npm install nrm -g

查看可用的 npm 资源

nrm ls

**切换 npm 源；用法： nrm use xxx **

  nrm use taobao

//切换之后可用 nrm ls查看是否已经切换了npm源

全局安装 yarn

 npm i yarn -g

第四步 安装vue-cli 3.0

如果之前全局安装了旧版本的 vue-cli，需要先卸载旧版本的然后再安装新版本,卸载看第二步
// 安装新版本

npm install @vue/cli -g   

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确 (3.x)：

vue --version

第五步 vue-cli 搭建脚本文件，创建项目

选定路径，新建vue项目，也可以终端输入cd目录路径
我是以自定义项目 my-project为例（名称中不能含有大写字母）

vue create  my-project

然后根据提示进行相应的配置
提示我与默认 yarn 的连接很慢 要我换成 taobao 此处我选择的时候 y

选择第二个 Manually select features 手动选择功能，然后回车

然后选择想要的功能（Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试）（使用空格选择），然后回车

路由管理器：路由使用历史模式？，此处我选的是 y

选择CSS预处理器语言，此处我选择的 Less


选择何时进行代码检测，此处选择在保存时进行检测

选择单元测试类型

选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中




配置完成后等待构建

构建完成后：

项目结构

运行项目：
先进入项目地址

cd my-project

再启动服务，运行

npm run serve

需要打包编译的话：

npm run build

运行地址，默认是8080端口，此处我的8080端口被占用所以是8081端口

App running at:
- Local: http://localhost:8081/
- Network: http://192.168.88.19:8081/

运行结果：