vue-cli3.0安装配置
vue3出来这么久第一次安装,新增了不少功能,参考了各方大佬的做个保存。
安装:
npm install -g vue@cli
查看是否安装完成:
vue -v
创建项目文件:
vue create 文件名
选择是默认配置还是手动配置,我选择手动配置:
default(babel,eslint) //默认设置
Manually select features //手动设置
手动配置:
( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
( ) Progressive Web App (PWA) Support // 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试
是否使用history router,我选择的hash
:
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)。
hash: 浏览器url址栏 中的 # 符号(如这个 URL:http://www.myhtml.com/#/123,hash 的值为“ #/123”),hash 不被包括在 HTTP 请求中(对后端完全没有影响),因此改变 hash 不会重新加载页面。
history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法(需要特定浏览器支持)。单页客户端应用,history 需要后台配置支持。
选择css处理器,我选择less:
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
语法检测工具,我选择eslint + Prettier:
Pick a linter / formatter config: (Use arrow keys)
选择语法检查方式,我选择保存就测:
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ( ) Lint on save // 保存就检测 ( ) Lint and fix on commit // fix和commit时候检查
选择babel,postcss,eslint这些配置文件放哪,我选择放入单独文件夹:
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
In dedicated config files // 独立文件放置
In package.json // 放package.json里
键入N不记录,如果键入Y需要输入保存名字,我选择不记录:Save this as a preset for future projects? (Y/n)
等待下载依赖
项目创建好后:
cd 文件名// 进入项目根目录 npm run serve // 运行项目