一、创建空的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)选择默认配置(比较简单)--后面默认就可以
最后这样就成功了,在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
启动服务:
正在创建页面:
创建完毕: