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 // 运行项目
posted @ 2020-02-17 21:26  阿软妹  阅读(396)  评论(0编辑  收藏  举报