全局安装vue-cli
cnpm install -g @vue/cli
检测是否安装成功
vue --vesion
新建项目
创建一个 名字为hello-world的项目
vue create resource-share
创建要给项目 如果不愿意用命令行,还可以用图形界面
vue ui
选择配置
如果不使用UI界面,会是这样
如果你上一次配置并保存了这里就会指向一个你上次保存的名字,第一次执行create是没有的
按键盘上下键可以选择默认(default)还是手动(Manually),如果选择default,一路回车执行下去就行了
继续手动一下
选项配置
当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键
选择哪一个,按空格键确定,A键是全选,所有的都选择好后,按enter键进行下一步
在选择功能后,会询问更细节的配置,
- Babel:将ES6编译成ES5
- TypeScript:JS超集,主要是类型检查
- 是否使用class风格的组件语法:Use class-style component syntax?
- 是否使用babel做转义:Use Babel alongside TypeScript for auto-detected polyfills?
- Progressive Web App(PWA)Support:渐进式WEB应用支持
- Router:路由
- Vuex:状态管理
- Linter/ Formatter:代码检查工具
- 选择Linter / Formatter规范类型:Pick a linter / formatter config
- 选择lint方式,保存时检查/提交时检查:Pick additional lint features
- CSS Pre-processors:css预编译
- 选择CSS 预处理类型:Pick a CSS pre-processor
- Unit Testing:单元测试,开发过程中前端对代码进行自运行测试
- E2E Testing: 端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。
我们的选择如下
由于我已经安装了vue-router,他会问这么一句
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
我们这里先选择no
此处详情:history与hash模式
选择css预处理工具
我是用less
代码检查与自动化代码格式
- eslint w…: 只进行报错提醒;(如果还没熟悉eslint,推荐使用此模式)
- eslint + A…: 不严谨模式;
- eslint + S…: 正常模式
- eslint + P…: 严格模式;
上面这个是问你选择哪个自动化代码格式化检测,配合vscode编辑器的
Prettier - Code formatter插件,我选的随后一个
是否保存设置
- 这里第一个选项是问你是否保存刚才的配置,选择确定后,你下次再创建新项目就有你以前选择的配置了,不用重新再配置一遍了
- 第二个保存时检查/提交时检查:Pick additional lint features
我不选择第一项,不用保存配置,选择第二项
配置文件放哪
上边这俩意思问你像,babel,postcss,eslint这些配置文件放哪?
第一个是:放独立文件放置
第二个是:放package.json里
这里推荐放单独配置文件,选第二个
上面的所有配置是否保存?
上边问你是否将以上这些将此保存为未来项目的预配置吗?
如果选择是的话,会出一个描述项目,你随意选择,点击确定就开始下载模板了
之后回扯就好了
项目启动
$ cd resource-web
$ npm run serve