vue 运行环境安装与配置

1.安装 Visual Studio Code

2.安装 Node  查看版本:node -v

3.安装 Git      查看版本:git --version

4.安装cli

   npm install -g @vue/cli

   查看版本:vue -V

5.新建项目:vue create subject_name

? Please pick a preset: (Use arrow keys)  选择预设

   Default ([Vue 2] babel, eslint)  默认2.0
   Default (Vue 3) ([Vue 3] babel, eslint)  默认3.0
> Manually select features 手动

   这里按键盘上下方向键选择手动设置,回车

 

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)  选择项目需要配置的功能:(按<空格键>选择与取消,<a>切换全部,<i> 反转选择)

> (*) Choose Vue version  选择vue版本
   (*) Babel  支持新特性语言,如 es6
   ( ) TypeScript  js超集
   ( ) Progressive Web App (PWA) Support  渐进式Web应用程序(PWA)支持
   (*) Router  路由器
   (*) Vuex  状态管理
   (*) CSS Pre-processors  CSS预处理器
   (*) Linter / Formatter  格式化程序
   ( ) Unit Testing  单元测试(开发者角度)
   ( ) E2E Testing  端到端测试(用户角度)

   这里一次性选完后回车开始逐步配置

 

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)  选择vue版本
> 2.x
   3.x

   这里选择2.0版本

 

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)  对路由器使用历史记录模式? (需要适当的服务器设置,以便在生产中进行索引回退)(是/否)

    这里输入Y回车(采用历史路由模式地址栏才不会出现#)

 

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):  选择css预编译模式
   Sass/SCSS (with dart-sass)
   Sass/SCSS (with node-sass)
> Less
   Stylus

   这里选择less,回车

 

? Pick a linter / formatter config:  选择esLine代码规范检查级别
> ESLint with error prevention only  基本
   ESLint + Airbnb config  Airbnb编码规则
   ESLint + Standard config  标准
   ESLint + Prettier  完美

   这里选择基本,回车

 

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)  选择esLine其他功能

> (*) Lint on save  保存的时候检测
   ( ) Lint and fix on commit  提交git的时候检测

   这里选择直接保存,回车

 

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)  您希望在哪里放置Babel,ESLint等的配置? (使用箭头键)

   In dedicated config files  在专用配置文件中
> In package.json  在package.json中

   这里选择把配置信息存在package.json中即可,回车

 

? Save this as a preset for future projects? (y/N)  将其另存为将来项目的预设吗? (是/否)

   这里选N,不保存此次预设,回车项目新建中...

 

6.运行项目:npm run serve

 

7.打包项目:npm run build

posted @ 2020-07-09 17:08  动听小林  阅读(3181)  评论(0编辑  收藏  举报