八月中秋白露,路上行人凄凉;小桥流水稻花香,日夜千思万想。心中不得宁静,清晨早念文章;十年寒苦在书房,方显才高智广。
今天开始我就给同学们分享如何使用vue开发项目。
Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。
本地安装vue-cli
#全局安装vue-cli
cnpm install -g @vue-cli
vue-V 查看vue版本号
使用vue-cli快速创建vue项目
1、vue create 搭建新项目
vue create <Project Name> //文件名 不支持驼峰(含大写字母)
Default([Vue 2] babel, eslint):vue2默认设置非常适合快速创建一个新项目的原型,没有带任何辅助功能的npm包
Default(Vue 3 Preview)([Vue 3] babel, eslint):vue3默认设置非常适合快速创建一个新项目的原型,没有带任何辅助功能的npm包
Manually select features:自定义配置是我们所需要的面向生产的项目,提供可选功能的 npm 包
在这里我们选Manually select features按方向键 ↓直接enter
Choose Vue version 选择Vue版本
Babel 将es6 语法转换成兼容的 js
TypeScript 支持使用 TypeScript 语法来编写代码
Progressive Web APP(PWA) Support PWA 支持
Router vue 路由配置插件
Vuex vue 程序状态管理
CSS Pre-processors css 预处理
Linter / Formatter 代码风格检查和格式化
Unit Testing 单元测试
E2E Testing E2E 测试
选择vue版本
Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)。
我这里建议选n。这样打包出来丢到服务器上可以直接使用了,后期要用的话,也可以自己再开起来。
选yes的话需要服务器那边再进行设置。
我选择的是Sass/Scss(with dart-sass)
node-sass是自动编译实时的,dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。
提供一个插件化的javascript代码检测工具,ESLint + Prettier 使用较多
( ) Lint on save // 保存就检测( )
Lint and fix on commit // fix和commit时候检查
建议选择保存就检测,等到commit的时候,问题可能都已经积累很多了。
> In dedicated config files // 独立文件放置
In package.json // 放package.json里
我选的是放在json里面
键入N不记录,如果键入Y需要输入保存名字。
等待创建项目
执行它给出的命令,可以直接访问项目