一、安装前言
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或已有项目整合。
二、安装特点
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
三、安装
小知识点:渐进式的意思是指可以在页面直接引入使用也可以在脚手架中使用
1.独立版本
我们可以在Vue.js的官网上直接下载vue.js,并在.html中通过 开发环境不要使用最小压缩版,不然会没有错误提示和警告!
使用vue多页面开发:
- 引入vue.js
- 创建一个vue根实例 new Vue({选项})
2.使用CDN引入
- BootCDN(国内) : cdn.bootcss.com/vue/2.2.2/v… , (国内不稳定)
- unpkg:unpkg.com/vue/dist/vu…, 会保持和 npm 发布的最新的版本一致。(推荐使用)
- cdnjs : cdnjs.cloudflare.com/ajax/libs/v…)
3.NPM安装
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service),该依赖: 可升级; 基于 webpack 构建,并带有合理的默认配置; 可以通过项目内的配置文件进行配置; 可以通过插件进行扩展。 一个丰富的官方插件集合,集成了前端生态中最好的工具。 一套完全图形化的创建和管理 Vue.js 项目的用户界面。 Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性。 在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM有完整的生态,能很好的Webpack或者Browserify 模块打包器配合使用。
vue-cli3脚手架安装
npm install -g @vue/cli # OR yarn global add @vue/cli # TEST vue -V
创建项目
vue create my-project # OR vue ui
命令讲解
根据提示,我们选择搭建项目需要集成的工具,对于新手,一般建议使用默认,如果需要其他集成,用方向键移动到手动选择功能,然后点击回车键
Vue CLI v4.2.3 ? Please pick a preset: (Use arrow keys) //请选择一个预设:(使用箭头键) > default (babel, eslint) //默认(babel,eslint) Manually select features //手动选择功能
如果创建过,会提示下面信息
Vue CLI v4.2.3 ? Target directory my-template already exists. Pick an action: (Use arrow keys) //目标目录my-template已存在 选择一个动作:(使用箭头键) > Overwrite //覆写上次配置 Merge //合并 Cancel //取消
选择Overwrite覆盖上次配置
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拉取项目
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包管理器,选中直接点击回车
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的优势是:
- Jest容易安装配置:Jest可以说是零配置的,它会自动识别一些测试文件。只要用npm安装jest之后运行jest,即可完成测试,非常容易。
- 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
期待
Vue会开设[Vue从出师到挂帅]专题进行讲解,敬请期待!!!