Vue项目的创建（详细步骤）

1.安装 node.js

从官网下载、安装就行，安装完成后，执行：

node -v

若出现对应的版本号，则说明安装成功

npm 包管理器，是集成在 node 中的，所以直接输入 npm -v 就会显示出 npm 的版本信息

2.安装 cnpm

由于有些 npm 有些资源被屏蔽或者是国外资源的原因，经常会导致用 npm 安装依赖包的时候失败，所以还需要 npm 的国内镜像 -cnpm

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

3.安装 vue-cli 脚手架构建工具

npm install -g vue-cli

通过以上三步，需要准备的环境和工具都准备好了，接下来开始使用 vue-cli 来构建项目

4.用 vue-cli 构建项目

在 workspace 中进行（不建议在桌面

• 初始化一个项目：vue init webpack firstvue
• 其中 webpack 是构建工具（整个项目是基于 webpack 的
  

(1)? Project name (firstvue)：项目名称（均小写）
(2)? Project description (A Vue.js project)：项目描述
(3)? Author () ：项目作者
(4)? Vue build
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6 KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files - render functions are required elsewhere
直接回车
(5)? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择
(6)? Use ESLint to lint your code? (Y/n) y 是否使用ESLint，这里根据需求选择
(7)? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself)
直接回车
(8)? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择
(9)Setup e2e tests with Nightwatch? (Y/n) n 是否需要单元测试，这里根据需求选择
(10) Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
❯ No，I will handle that myself
创建项目后需要安装项目所需要的依赖，这里选择 no，本步骤作为步骤6说明

5.安装项目所需的依赖

• 安装依赖包，首先 cd 到项目文件夹（firstvue文件夹），然后运行命令 npm install ，等待安装
• 安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源
  注：我在实际中其实是前面选择no不安装依赖，也是会有node_modules的，只是和yes安装的文件夹大小不一样

6.运行项目

• npm run dev，以热加载方式运行（在修改完代码后自动刷新浏览器，实时看到修改后的效果
• “run” 对应的是 package.json 文件中，scripts 字段中的 dev，也就是 node build/dev-server.js 命令的一个快捷方式
  运行结果，浏览器打开如图：
  
  表示项目创建成功！！

vue init webpack 、 vue create 创建项目产生的项目文件区别说明

项目目录结构：

vue init webpack myvue	vue create myvue
build及config：webpack文件、开发环境配置相关	node_modules：通过npm install 安装的依赖代码库
node_modules：依赖库	public：部署到生产环境的目录
src：项目源码	src:源码
static：存放静态资源	.gitignore：git忽略里面设定的这些文件的提交
.babelrc：babel 相关配置（因为我们的代码大多都是 ES6，而大多浏览器是不支持 ES6 的，所以我们需要 babel 帮我们转换成 ES5 语法）	babel.config.js:：babel转码配置
.editorconfig：编辑器的配置，可以在这里修改编码、缩进等	package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境、生成环境的。依赖插件及版本等。
.eslintignore：设置忽略语法检查的目录文件
.eslintrc.js：eslint 的配置文件
.gitignore：git 忽略里面设定的这些文件的提交
index.html：入口 html 文件
package.json：项目的配置文件，用于描述一个项目，包括我们 init 时的设置、开发环境、生成环境的依赖插件及版本等。
package-lock.json：普通 package.json 文件“^2.0”这样写的，意味着版本可以大于等于2.0，如此就会出现各种错误。

总结

• vue init 是 vue-cli2.x 的初始化方式，可以使用github上面的一些模板来初始化项目，webpack 是官方推荐的标准模板名
• vue create 是 vue-cli3.x 的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是 vue-cli3 的项度目，与 vue-cli2 项目结构不同，配置方法不同，具体配置方法参考官方文档网页
• vue-cli2.x 项目向专 3.x 迁移只需要把 static 目录复制到 public 目录下，老项目的 src目录覆盖 3.x 的 src 目录(如果修改了配置，可以查看文档，用 cli3 的方法进行属配置)