vuecli3从入门到项目实战

导引

1、为什么要使用vue-cli？

要从快速构建一个项目说起，当下潮流，构建一个项目，一般都会采用前后端分离的web架构。同时对前端搭建环境提出了更高的要求。

平台无关性、功能更齐全

占内存少、更高效

帮助我们写好Vue基础代码的工具，也是行内通用的工具

2、Vue是前端框架

只需要安装nodejs，不需要掌握其用法。

一、安装vue-cli

1、Nodejs安装

参考文档：https://www.cnblogs.com/matanzhang/p/11441693.html

设置node、npm环境变量

计算机->属性->高级系统设置->环境变量->系统变量->Path

设置全局模块缓存目录

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

加入环境变量。

2、常见的dos命令

使用脚手架会经常用到命令行操作

cd 打开文件夹

md创建新文件夹

dir 查看文件夹内容

cd .. 返回上一级文件夹

3、npm安装和参数设置

npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

cnpm：因为npm插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们乐于分享的淘宝团队分享了使用国内镜像来代替国外服务器

全局安装（global），可以在命令行下（-g）直接使用

可以通过npm root -g查看全局安装的文件夹未知

手动指定从哪个镜像服务器获取资源

npm install -gd --registry=http://registry.npm.taobao.org

为避免每次安装都需要--registry参数，可以使用如下命令进行永久设置

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

参数说明

-S，--save安装包信息将加入到Dependencies（生产阶段的依赖）

-D，--save--dev 安装包信息将加入到dev Dependencies（开发阶段的依赖），所以开发阶段一般使用它

i，是install的缩写（注意：前面没有“-”）

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

4、vue-cli安装

npm install -g vue-cli

cnpm install -g vue-cli

验证vue版本："d:\Program Files\nodejs\node_global\vue" -V

如果前面没有设置环境变量的话，这里需要加入环境变量Path路径。

vue-cli家族成员：cli2、cli3

vue-cli全称Command-Line Interface：又称为命令行界面或字符用户界面。

二、创建vue项目

1、创建cli中部分配置内容说明

? Install vue-router? Yes 官方的路由，大多数情况使用这个

? Use ESLint to lint your code? N   统一代码风格，自己做开发的话，选择no。

2、创建vue-cli项目

注意，第一次创建项目很多包需要下载，耗时很久，早做准备。

D:\vuepro\testcli>vue init webpack test1

? Project name test1

? Project description A Vue.js pro

? Author

? Vue build (Use arrow keys)

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Set up unit tests Yes

? Pick a test runner jest

? Setup e2e tests with Nightwatch?

创建完成后，启动项目。

D:\vuepro\testcli>cd test1

D:\vuepro\testcli\test1>npm run dev

浏览器访问验证：http://localhost:8080/，无异常即ok。