一、创建空的vue项目及步骤解析

一、创建空的vue项目

vue需要的环境：

Node.js : Javascript运行环境
npm ：包管理工具（同Node.js一同安装）
vue.js : 官方命令行工具 npm install vue -g
vue-cli：vue 脚手架 npm install -g
wepack :打包工具，用于打包项目 npm install webpack -g
npm包管理工具：用来管理
vue的开发工具，一般我喜欢用Visual Studio Code

2、创建vue命令

在e:/test/demo 目录下创建名为test的vue项目

（1）点击开始--输入cmd--进入命令行窗口

（2）命令：

【1】e: 切换到e盘

【2】cd 路径，定位到路径下比如，cd test/demo ,代表定位到test文件夹下的demo文件夹

【3】vue create 项目名称，比如想创建名为test的项目，就输入vue create test——Please pick a preset （选择默认配置或者手动配置）

（1）选择默认配置（比较简单）--后面默认就可以

扫描二维码关注公众号，回复： 14757033 查看本文章

最后这样就成功了，在e:test/demo 目录下会生成test文件夹，即空的vue模板

（2）选择手动配置：

步骤一：选择默认配置还是手动配置，此处选择手动配置

步骤二：Check the features needed for your project vue的一些配置选择（按上下键移动到想要选择的项上，按空格键就选中了，* 代表选中或者取消，选择完后，按回车键下一步），此处我都选择上了

Choose Vue version vue版本选择，我只安装了vue2.0，所以我这里没有这个选项
Babel 是否兼容低版本浏览器，将ES6编译成ES5
TypeScript 主要是js类型检查
Progressive Web App (PWA) Support 是否支持渐进式Web应用程序
Router 是否配置路由
Vuex 是否配置状态管理模式（相当于本地存储）
CSS Pre-processors 是否配置CSS预处理器
Linter / Formatter 代码检查工具，格式化程序规范选择
Unit Testing 是否创建单元测试，开发过程中前端对代码进行自运行测试
E2E Testing 是否创建端到端测试

步骤三：选择 use class-style component syntax ，是否使用Class风格装饰器，此处我选择不使用，输入N

区别：

不使用装饰器：app= new Vue()创建vue实例
使用装饰器后：class app extends Vue{}

步骤四：Use Babel alongside TypeScript for auto-detected polyfills? 使用Babel与TypeScript一起用于自动检测的填充? 此处选择是，输入Y

步骤五：Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 是否对路由器使用历史记录模式，即是否使用history模式还是hash模式。一般选择不使用，N

hash和history的区别：

hash

hash 模式，url后，会带着#，改变hash，页面不会刷新，不会更改整个页面，只会更改#后面路由配置的内容，格式：url#hash，比如http:http://localhost:9011/#/chain/info/steps

hash原理：通过监听浏览器的onhashchange()事件变化，查找对应的路由规则

history

history模式：url后没有#，看起来比较美观，格式：http://localhost:9011/chain/info/steps 这种的，缺点是，（1）若是找不到chain/info/steps 这个路由，会报错404，所以需要设置如果匹配不到任何资源的情况，（2）每次刷新会重新像后端请求整个网址，也就是重新请求服务器

history原理：利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化

步骤六：Pick a CSS pre-processor? 选择一种css 预处理器，我这里选择第二个

步骤七：Pick a linter / formatter config?  选择一种代码格式化检测工具，这里我选择第一个
        TSLint: ts格式检验工具
        ESLint with error prevention only: ESLint 只会进行错误提醒
        ESLint + Airbnb config: ESLint Airbnb标准
        ESLint + Standard config: ESLint Standard 标准
        ESLint + Prettier: ESLint（代码质量检测）+ Prettier（代码格式化工具）

步骤八：Pick additional lint features? 代码检查方式: 保存时检查 or 提交时检查; 我选择, 保存时检查，我选择第一个

步骤九：Pick a unite testting solution 选择哪个选择单元测试方案，这里我选第一个

Mocha + Chai：只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成

Jest ：是一个由 Facebook 开发的测试框架，是功能最全的测试运行器

步骤十：Pick an E2E testing solution ，选择单元测试解决方案，普遍用到最多的时Mocha + chai，我们也选第一项。

步骤十一：Where do you prefer placing config for Babel, ESLint, etc.? 选择端对端测试的类型，默认回车

步骤十二：Save this as a preset for future projects ，是否保存成一个预设给以后项目使用。这里选 y，然后输入存储当前配置项的名称，例如 nameA，随后就会创建完毕，并提示通过 npm run serve 启动服务：

正在创建页面：

创建完毕：

一、创建空的vue项目及步骤解析

猜你喜欢