如何创建vue-cli3项目

vue-cli3项目

【什么是vue-cli】

• vue-cli3是官方推荐使用的一个发布vue项目的脚手架（cli）。
• 使用这个vue-cli可以快速的搭建vue环境和webpack配置。
• 在使用vue开发大型项目的时候，我们都会用到这个脚手架，模块化开发项目。

使用vue前期的安装准备

• Vue CLI需要Node.js8.9或者更高的版本（推荐使用8.11.0+）。你可以使用nvm或者nvm window来管理电脑上的Node版本。

【安装Vue CLI脚手架】
终端全局安装

(这是在全局安装的，所以只要安装一次即可)
npm install -g @vue/cli
# or
yarn global add @vue/cli

【安装cnpm】
我们在windows系统安装完node.js和npm后，由于需要加速从而选择安装cnpm，命令如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
【提示】
如果安装很慢可以把npm源切换为淘宝源，或者把 npm改为cnpm。
npm config set registry https://registry.npm.taobao.org/

【验证安装】
安装完毕，可以输入 vue --version 代码，查询安装版本信息，来验证它是否安装成功。

vue -v 无效 v要大写

【创建项目】
终端输入 vue create xxx，创建项目文件夹。(xxx表示项目文件夹名字，不要用驼峰写法)

然后选择vue-cli配置文件，因为项目不同，需要的文件配置可能就不同，例如我们需要router 不需要 vuex等等，按需求来选择。

之后就可以等项目文件夹创建好

【安装各种依赖包】

【安装axios网络请求】
axios是官方推荐的网络请求数据的。

然后 npm i axios -S 安装网络请求

【安装vue-router路由】
// 方法1：

npm i vue-router -S

// 方法2：

vue-cli3提供下面的命令来引入

vue-router vue add router

【让项目跑起来】
全部完成后让项目跑起来 npm run serve。

项目完成后运行 npm run build，会生成dist文件夹，这是最终项目要上线用的文件夹。

写错了 是生成dist文件夹