搭建项目，创建项目

1、首先创建项目文件夹，进入文件夹

2、执行命令 vue init webpack testproject 初始化项目，其中有安装选项，用户需要输入选项确认。

    rooter要选Y，其他可默认直接回车

    若当前命令报错，说明npm安装vue-cli是有错误。在当前目录重新安装vue-cli

创建VUE_CLI:

vue init webpack projectName

Project Name ===> projectname

project description ===>说明

Author===> 作者

Install vue-router? ===>Y

ESLint to lint your code? ===>Y

Set unit tests ===> 单元测试

......

cd projectname

npm run dev

项目地址: http://localhost:8080

vue init webpack pojectName [如果安装失败，cnpm  i nstall -gd vue-cli] [gd 开发/生产环境] 

?Project name 工程名称【不能大写】

？Project description 工程说明 【可选 默认 回车】

？Author 作者【默认回车】

？Runtime ..... 【运行或编译是否同步进行 默认回车】

？Install vue-router(Y/N) 是否安装路由

？Use ESLint to ilint your code [代码管理规范] N

？Set up unit tests（Y/N）是否单元测试

NPM

install vue-router  // 安装路由

ESlint管理代码，代码风格管理工具

cnpm install -gd vue-cli //安装vue-cli

vue init webpack test1  // 创建文件夹名称为test1的vue-cli工程；webpack 是模板类型

创建vue-cli 项目：

1、vue init webpack projectName

创建cli过程中部分配置内容

install vue-router？（Y/n）Y;

Use ESLint to lint your code?(Y/n)Y;

Isstall  vue-rounter?(Y/n)是否安装vue -router，官放的路由，大多数情况都使用

Use ESLint to lint  your code?(Y/n)是否使用ESLint管理代码，WSLint是个代码风格管理工具，是用来统一风格代码的，一般项目中使用。

cnpm install -gd vuecli

创建vue-cli项目

安装cnpm命令

npm i -g cnpm  --registry=https://registry.npm.taobao.org

创建项目：vue init webpack +工程名称

创建cli过程中，vue-router和eslint的配置问题

创建vue-cli项目使用init

webpack只是模板之一

创建vue-cli2项目

Project name：项目名称，不允许输入大写字母

创建vue-cli搭建起来的项目

命令行创建：vue init webpack （projectName）

init：创建

webpack：模板（一般都是用webpack非常的常用）

（projectName）：项目名称，注意一定要小写

需要用户干预的地方

? Project name test1

//项目名称确认，一般跟文件名称想用默认就行，必须全小写（回车下一项）

? Project description A Vue.js project

//给当前项目添加说明、描述，类似readme

? Author name <***@qq.com>

//作者（回车下一项）

? Vue build standalone

//选择运行和编译是否同步进行 默认就行（回车下一项）

? Install vue-router? Yes

//选择路由模式，这里必须选择  y = yes，如果不选择yes页面跳转会很生硬，不流畅

? Use ESLint to lint your code? No

//选择代码的规范，规范格式，书写等方面，新手写demo建议选择no，正规的项目开发一定要选择yes，有利于规范团队开发的可视化（后期可以改变状态）

? Set up unit tests Yes

//是否需要单元测试（回车下一项）

? Pick a test runner jest

//选择单元测试（回车下一项）

? Setup e2e tests with Nightwatch? Yes

//也是单元测试（回车下一项）

? Should we run `npm install` for you after the project has been created? (recommended) npm

//否应该在项目创建后为您运行' npm安装' (推荐)npm    （ 默认就好）

运行我们的vue项目

运行指令：npm run dev（在项目根目录运行）

运行结束后会返回一个访问路径：http://localhost:8080

浏览器访问看到vue欢迎页面就可以了，这里跟tomcat有异曲同工之妙

vue init webpack projectName   

项目搭建成功。

npm run dev 启动服务

最后在浏览器输入 localhost:8080

出现欢迎页面

vue init webpack 项目名称（不能用大写字母）

install vue-router？选项要选y。路由跳转一定要安装

ESLint 风格管理工具，一般项目中都会使用，建议安装。

创建vue-cli项目

vue init webpack 项目名

创建cli过程中部分配置内容

Install vue-router?(Y/n)：是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入y后会车即可。

Use ESLint to lint your code?(Y/n)：是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。

webpack  模版

-S --save 安装包信息加入到dependencies(生产阶段的依赖)

-D --save--dev  安装包信息将加入到devdependencies（开发阶段依赖）

i是install的缩写

 npm root -g

获取全局安装位置

npm init 配置文件初始化

hash模式带# 

创建vue-cli项目

(1)md testProject(创建一个根目录文件,存放vue项目)

(2)vue init webpack projectName(不允许大写字母命名项目)(如果在这一步报错或者出现异常 可能是vue安装有问题,此时在cmd中进入当前的cd testProject文件夹,重新安装一次vue:cnpm i -gd vue-cli)

(3)

(1)npm i -g cnpm --registry=https://registry.npm.tabobao.org

(2)cnpm i -g vue-cli

(3)查看vue版本:vue -V

创建vue-cli项目

• vue init webpack projectName

Install vue-router?(Y/N)是否安装vue-router,这是官方的路由，大多数要使用

Use ESLint to lint your code? (Y/N) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目都会使用。

vue-cli2：

vue init webpack projectName

cnmp install -gd vue-cli   安装vue-cli

npm run dev 启动项目

vue-cli项目创建：【init：命令，webpack：所选择的模板，projectName：工程名称(不允许输入大写字母)】

vue init webpack projectName

创建cli过程中部分配置内容：

1.Install vue-router？(Y/n)是否安装vue-router，这是官方路由，大多数情况下都使用，这里就输入“y”后回车即可。【用户页面之间的跳转】

2.Use ESLint to lint your code？(Y/n)是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。

3.其他选择默认

成功启动vue-cli项目：

http://localhost:8080【端口号8080可以改变】

vue-cli项目创建：【init：命令，webpack：所选择的模板，projectName：工程名称(不允许输入大写字母)】

vue init webpack projectName

创建cli过程中部分配置内容：

1.Install vue-router？(Y/n)是否安装vue-router，这是官方路由，大多数情况下都使用，这里就输入“y”后回车即可。【用户页面之间的跳转】

2.Use ESLint to lint your code？(Y/n)是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。

3.set up unit tests  这是单元测试  Y/n               n

4.其他选择默认 n

成功启动vue-cli项目：

http://localhost:8080【端口号8080可以改变】

创建vue项目

vue init webpack projectNmae