Vue-cli简单使用

Vue-cli3.X建立项目

1.环境要求

安装Vue-cli3.x的前置条件：Node.js
以Windows为例安装Node.js,百度 “Node.js官网” 或”Node.js中文网”都可 ,如无特殊要求 下载安装 LTS版（长期支持版，该版本已知足Vue CLI官网所须要求版本要求）

一路Next便可，通常无需更改默认安装设置
安装完毕在开始菜单内便可找到一个名为 Node.js 的文件夹以下图

注：Node.js内可直接运行js基础代码（非DOM等相关代码）**
而咱们须要使用的是 Node.js command prompt

2.Vue-CLI安装：

官方命令 npm install -g @vue/cli
注：@不能少，少了@安装的不是3.x版本而是1.x、2.x版本，若已经安装了旧版本则需卸载旧版本而后再安装新版本
旧版本卸载命令 npm uninstall vue-cli -g
补充：vue-cli 3.x 卸载命令 npm uninstall @vue/cli -g (若是须要可以使用)

国内下载速度比较慢
查看npm当前下载镜像，命令为：npm get registry
结果> https://registry.npmjs.org/
若是嫌弃下载慢能够切换为淘宝镜像或者直接安装cnpm并更换淘宝镜像，命令以下：

npm config set registry http://registry.npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org

等待安装完毕

2.1使用脚手架建立项目

建议先考虑项目文件夹储存的位置并进入相关位置，以桌面为例
cd desktop
若是无需更改位置，请跳过；若是需返回上级目录 cd.. 便可，其余cmd命令可自行百度
建立项目的两种方式：

1、直接命令行建立

建立项目命令： vue create 项目名 本身起个名字便可，但请注意不能有大写字母，不然报错：Warning: name can no longer contain capital letters
vue create learn √
接下来会问你选择那种配置（会显示全部保存过的配置，首次使用只会显示 default（babel,eslint） 以及 Manually select features）
可选本身以前建立过的或选择官方默认配置或者手动选择)

选择Manually select features 将出现如下内容

方向键 控制上下 空格选择 A 全选 I反转选择
选择好大致的功能/插件以后 回车 接着会让你选择细分的特性
好比 Linter/Formatter 下：

在保存时进行代码检测

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

Pick a CSS pre-processor(css预处理语言)下 有SCSS/SASS、LASS、Stylus
还有TS、PWA、Roter（vue 路由管理；SPA必带）、Vuex（vue状态管理）、测试（Unit Testing、E2E Testing）等等，都可按需选择
若是出现node-sass的安装报错，能够尝试改用淘宝源，或使用cnpm直接安装

npm i cnpm -g --registry=http://registry.npm.taobao.org
cnpm i node-sass -g

最后会询问你 是否保存为将来项目的预设配置 若是保存须要输入名称

等待项目建立...

项目建立好后按提示进入项目，并启动项目
cd learn 进入后 npm run serve

这两个地址都可访问，第二个地址也并不能对外访问，应该是没作好端口映射，那这个地址用来干吗的？

2、经过GUI建立

在下载好vue-cli3.x后，进入项目存储位置后 输入 vue ui，会在浏览器内打开vue项目仪表盘（非初次使用界面）

在使用过GUI建立过项目后，再次打开就会直接进入旧项目管理界面，如上
若是须要再新建一个项目，可在 左上角下拉菜单内选择 ”Vue项目管理器“返回首页



建立——》在此建立新项目——》输入项目文件夹名（没有git建议关闭）——》下一步


可选本身建立过的配置或者官方配置或者手动配置
手动配置以下图所示， 按需选择，相关介绍以前提到过了

注：有下拉框的得先选择不然不能 下一步
最后点击建立并等待
最终和CMD截图以下

若是想在浏览器内启动的话 左侧菜单栏——》任务——》任务面板——》serve——》运行——》右侧 启动app (从左往右点击红色便可)

也可命令行启动，命令与以前所述相同
至此结束