这里需要nodejs环境,如未安装请点这里https://nodejs.org/en/download/
一、安装vue-cli 3.x (目前最新版已更新至 3.5.1)
npm install --global @vue/cli
// 或者
yarn global add @vue/cli
vue3.x默认使用yarn 进行依赖安装和运行
安装成功后执行vue -V(注:这里V大写,查看vue版本)
二、新建项目
vue create demo // demo 为项目名称
回车后你将会看到
default:默认,一路回车就可以新建,
Manually:手动,可以自行选择要安装的插件(css预编译、测试工具、vue-router、vuex等)
这里我选择手动
呐,下面是项目配置,根据项目的需要进行选择(上下键选择,空格键选中,a键全选)
Babel:将ES6编译成ES5
TypeScript:是JavaScript的一个超集,扩展了JavaScript的语法。项目用typescript代替了javascript,这里我选择
Router和Vuex不做解释,路由和状态管理
Linter / Formatter:代码检查工具
CSS Pre-processors:css预编译
Unit Testing:单元测试,开发过程中前端对代码进行自运行测试
选好了吗?OK go on!
- Use class-style component syntax?
是否使用class风格的组件语法?
- Use Babel alongside TypeScript for auto-detected polyfills?
使用Babel与TypeScript一起用于自动检测的填充?
- Use history mode for router?
路由使用历史模式? 这种模式充分利用 history.pushState
API 来完成 URL 跳转而无须重新加载页面
- Pick a CSS pre-processor
挑选一个css预处理工具
更多延伸的解释自行百度哈,next ! 下面是代码检查的设置,为了让你的编码更加规范 φ(>ω<*)
-
typescript格式验证工具
-
只进行报错提醒;
-
不严谨模式;
-
正常模式;
-
严格模式;
(这里也可以不用代码检查,将package.json里面代码检查的依赖卸掉就好)
- 代码检查方式:我选择保存时检查 ❥(ゝω・✿ฺ)
- 单元测试工具,这里附上vue单元测试的链接,想了解的小伙伴戳这里 https://vue-test-utils.vuejs.org/zh/
- vue-cli 一般来讲是将所有的依赖目录放在package.json文件里
- 是否在以后的项目中使用以上配置,我选择no 毕竟每个项目需求不一样
回车进入依赖安装环节。。。
Please Wait 。。。
安装完成 (◕ᴗ◕✿)
cd 进入项目目录,然后执行yarn serve
浏览器访问localhost:8081端口
you can see it ! good job!