从脚手架开始学前端 【第5期】Vue脚手架搭建

时间  2020-03-09
标签 脚手架 开始 前端 第5期 vue 搭建 繁體版
原文   原文链接

前言

Vue.js（读音 /vjuː/, 相似于 view） 是一套构建用户界面的渐进式框架。html

特色

Vue 只关注视图层， 采用自底向上增量开发的设计。前端

Vue 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件。vue

安装

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，经过 @vue/cli 搭建交互式的项目脚手架。 经过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 能够经过项目内的配置文件进行配置； 能够经过插件进行扩展。 一个丰富的官方插件集合，集成了前端生态中最好的工具。 一套彻底图形化的建立和管理 Vue.js 项目的用户界面。 Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各类构建工具可以基于智能的默认配置便可平稳衔接，这样你能够专一在撰写应用上，而没必要花好几天去纠结配置的问题。与此同时，它也为每一个工具提供了调整配置的灵活性。node

vue-cli3脚手架安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli
# TEST
vue -V
复制代码

建立项目

vue create my-project
# OR
vue ui
复制代码

命令讲解

根据提示，咱们选择搭建项目须要集成的工具，对于新手，通常建议使用默认,若是须要其余集成，用方向键移动到手动选择功能，而后点击回车键android

Vue CLI v4.2.3
? Please pick a preset: (Use arrow keys) //请选择一个预设：（使用箭头键）
> default (babel, eslint)                //默认（babel，eslint）
  Manually select features               //手动选择功能
复制代码

若是建立过，会提示下面信息webpack

Vue CLI v4.2.3
? Target directory my-template already exists. Pick an action: (Use arrow keys) //目标目录my-template已存在
选择一个动做：（使用箭头键）
> Overwrite      //覆写上次配置
  Merge          //合并
  Cancel         //取消                                                                                             
复制代码

选择Overwrite覆盖上次配置git

Vue CLI v4.2.3
? Target directory D:\my-project already exists. Pick an action: Overwrite
Removing D:\my-project...
复制代码

根据本身的习惯，用箭头键选择对应的包管理器，小编用的是Yarn，选中直接点击回车程序员

Vue CLI v4.2.3
? Please pick a preset: default (babel, eslint)                                   //当前选中的选项记录
? Pick the package manager to use when installing dependencies: (Use arrow keys)  //选择安装依赖项时要使用的程序包管理器：（使用箭头键）
> Use Yarn
  Use NPM     
复制代码

使用Yarn拉取项目web

Vue CLI v4.2.3
✨  Creating project in D:\xunzhaotech\my-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.17.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
                                                                                                                                                                                                                                                success Saved lockfile.
Done in 88.14s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.17.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
                                                                                                                        success Saved lockfile.
Done in 17.99s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-project.
👉  Get started with the following commands:

 $ cd my-project
 $ yarn serve
复制代码

若是用的是NPM包管理器，选中直接点击回车chrome

Vue CLI v4.2.3
? Please pick a preset: default (babel, eslint)                                   //当前选中的选项记录
? Pick the package manager to use when installing dependencies: (Use arrow keys)  //选择安装依赖项时要使用的程序包管理器：（使用箭头键）
   Use Yarn
>  Use NPM     
复制代码

使用NPM拉取项目

Vue CLI v4.2.3
✨  Creating project in D:\xunzhaotech\my-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.17.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
                                                                                                                                                                                                                                                success Saved lockfile.
Done in 88.14s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.17.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
                                                                                                                        success Saved lockfile.
Done in 17.99s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-project.
👉  Get started with the following commands:

 $ cd my-project
 $ npm run serve
复制代码

上述咱们使用的默认选项，下面咱们进入手动选择选项，点击回车

Vue CLI v4.2.3
? Please pick a preset:       //请选择一个预设
  default (babel, eslint)     //默认（babel，eslint）
> Manually select features    //手动选择功能
复制代码

根据咱们项目的须要，结合方向键和空格键选择咱们须要的配置，而后点击回车

Vue CLI v4.2.3
? Please pick a preset: Manually select features //请选择一个预设：手动选择功能
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)//选取项目所需的功能：（按<空格>选择，<a>切换所有，<i>反转选择）
>(*) Babel                                   //集成Babel
 (*) TypeScript                              //集成TypeScript 
 (*) Progressive Web App (PWA) Support       //集成渐进式Web应用程序（PWA）支持   
 (*) Router                                  //集成Router
 (*) Vuex                                    //集成Vuex
 (*) CSS Pre-processors                      //集成预处理(Less/SCSS/Sass/Stylus)
 (*) Linter / Formatter                      //集成代码校验和格式化
 (*) Unit Testing                            //集成单元测试（站在程序员的角度测试）
 (*) E2E Testing                             //集成单元测试（站在用户角度的测试 )                                                                                                    
复制代码

根据咱们的须要，选择(Y/n)，若是所有使用，直接回车，在选择CSS预处理(CSS Pre-processors) 的时候，根据本身的习惯选择

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes //使用类样式的组件语法
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes //将Babel与TypeScript一块儿使用（用现代模式，自动检测的polyfill，转译JSX）
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes //使用路由器的历史记录模式？
（须要适当的服务器设置才能在生产中进行索引回退）
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)//选择一个CSS预处理器（默认状况下支持PostCSS，Autoprefixer和CSS模块）
> Sass/SCSS (with dart-sass) //dart-sass保存后生效
  Sass/SCSS (with node-sass) //node-sass自动编译实时
  Less
  Stylus                                                                                                                                                                                                                                                             
复制代码

选择须要校验和格式化的方式(Linter / Formatter),选择ESLint + Standard config点击回车

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: (Use arrow keys) //选择一个lint / formatter配置
  ESLint with error prevention only //仅具备错误预防功能的ESLint
  ESLint + Airbnb config            //ESLint + Airbnb 配置
> ESLint + Standard config          //ESLint +标准配置
  ESLint + Prettier                 //ESLint +代码美化
  TSLint (deprecated)               //TSLint（已弃用）                                                                                         
复制代码

根据须要选择保存时候校验，或者提交时修复校验,而后点击回车

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) //选择其余校验功能
>(*) Lint on save           //保存时校验（保存时校验）
 ( ) Lint and fix on commit //校验并修复提交 （提交时校验）              
复制代码

Jest是由facebook发布的，最近比较火热的一个测试框架。Jest的优点是:

  1. Jest容易安装配置:Jest能够说是零配置的，它会自动识别一些测试文件。只要用npm安装jest以后运行jest，便可完成测试，很是容易。
  2. Jest提供snapshot功能: snapshot功能可以确保UI不会意外被改变。Jest会把结果值保存在一个文件当中，每次进行测试的时候会把测试值与文件中的结果值进行比较，若是两个结果值不一样，那么开发者能够选择要么改变代码，要么替代结果文件。 3.其余:除了上面所提到的优点，Jest还拥有着很是广阔的API并且更加适合测试React应用。

Mocha是JavaScript界中最受欢迎的一款单元测试框架。

1.灵活性: Mocha比较灵活，和更多的一些库结合使用。 2.资料较多:Mocha是比较年老的测试框架，在JavaScript界中更加普遍地使用。所以Mocha的community比较大,本文咱们选择Mocha + Chai,而后点击回车

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: (Use arrow keys) //选择一个单元测试解决方案
> Mocha + Chai    //Mocha是JavaScript界中最受欢迎的一款单元测试框架
  Jest            //Jest是由facebook发布的，最近比较火热的一个测试框架                                                                                                                                                                                                                                                                 
复制代码

现代比较流行的 e2e 测试框架有Nightwatch、TestCafe、Protractor、WebdriverIO、Cypress，咱们选择 Nightwatch

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: (Use arrow keys)//选择一个E2E测试解决方案：（使用箭头键）
> Cypress (Chrome only) //Cypress（仅Chrome）
  Nightwatch (WebDriver-based) //Nightwatch（基于WebDriver）     
复制代码
Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggle all, <i> to invert selection)//选择浏览器以运行端到端测试
>(*) Chrome
 ( ) Firefox                                                                                                                                                                                                                                                                                          
复制代码

此处咱们选择在专用配置文件中，点击回车

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggle all, <i> to invert selection)Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)//您更喜欢在哪里放置Babel，ESLint等的配置。
> In dedicated config files //在专用配置文件中
  In package.json           //在package.json中
复制代码

这里咱们选择Y,在下次建立项目的时候使用，点击回车

Vue CLI v4.2.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel
, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Nightwatch
? Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggle all, <i> to invert selection)Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) //将此保存为预设以供未来的项目使用吗？                                                                                                                                                                                                                                                                                                                                                                    
复制代码

进入项目并安装依赖

PS cd .\my-project\  
# AND
yarn install
复制代码

项目目录

my-project
│  .browserslistrc
│  .editorconfig
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  package.json
│  README.md
│  tsconfig.json
│  yarn.lock
│
├─public
│  │  favicon.ico
│  │  index.html
│  │  robots.txt
│  │
│  └─img
│      └─icons
│              android-chrome-192x192.png
│              android-chrome-512x512.png
│              android-chrome-maskable-192x192.png
│              android-chrome-maskable-512x512.png
│              apple-touch-icon-120x120.png
│              apple-touch-icon-152x152.png
│              apple-touch-icon-180x180.png
│              apple-touch-icon-60x60.png
│              apple-touch-icon-76x76.png
│              apple-touch-icon.png
│              favicon-16x16.png
│              favicon-32x32.png
│              msapplication-icon-144x144.png
│              mstile-150x150.png
│              safari-pinned-tab.svg
│
├─src
│  │  App.vue
│  │  main.ts
│  │  registerServiceWorker.ts
│  │  shims-tsx.d.ts
│  │  shims-vue.d.ts
│  │
│  ├─assets
│  │      logo.png
│  │
│  ├─components
│  │      HelloWorld.vue
│  │
│  ├─router
│  │      index.ts
│  │
│  ├─store
│  │      index.ts
│  │
│  └─views
│          About.vue
│          Home.vue
│
└─tests
    ├─e2e
    │  │  .eslintrc.js
    │  │  globals.js
    │  │
    │  ├─custom-assertions
    │  │      elementCount.js
    │  │
    │  ├─custom-commands
    │  │      customExecute.js
    │  │      openHomepage.js
    │  │      openHomepageClass.js
    │  │
    │  ├─page-objects
    │  │      homepage.js
    │  │
    │  └─specs
    │          test-with-pageobjects.js
    │          test.js
    │
    └─unit
            example.spec.ts
复制代码

启动项目

yarn serve
复制代码

扫码关注

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程