一、环境搭建
1.1、安装node环境
下载安装包
Node.js 官方网站下载:https://nodejs.org/en/
选择操作系统对应的包

按步骤傻瓜式安装好即可
win+R 输入cmd 回车 输入node -v 回车,出现版本号就代表安装成功

二:安装镜像
NPM(Node Package Manager,节点包管理器)是NodeJS的包管理器,用于节点插件的管理(包括安装,卸载和管理依赖等)。NPM是随同新版的NodeJS一起安装的包管理工具,所以安装Node后可以直接使用npm完成接下来操作
NMP安装插件是从NPM官网下载对应的插件包,该网站的服务器在国外,经常会出现下载缓慢或出现异常,这时便需要找到另外的方法提供稳定的下载,这个方法就是CNPM。阿里巴巴的淘宝团队把插件都同步到了在中国的服务器,提供给我们从这个服务器上稳定下载资源。
注意:两者都只是包管理器,可随便选择
输入:npm install -g cnpm –registry=https://registry.npm.taobao.org

输入:cnpm -v (检测是否安装成功)。

cnpm的用法和npm的用法一致,只是在执行命令的时候将npm改为cnpm。
Vue-cli项目搭建
输入
npm i @vue/cli -g
会全局安装vue-cli
最新版
注意:如果安装了旧版本可通过 npm uninstall vue-cli -g
或 yarn global remove vue-cli
卸载它再重新安装,如需安装对应版本:npm install -g @vue/cli@3.0
输入:vue -V 检测是否安装成功

创建项目
打开
cmd
通过 cd 文件夹,到你想存项目的文件夹中
输入vue create project01
(project01为项目名称)

细节操作如下:

- Defaule 是自定义配置后保存好的模板;
- default 是使用默认配置安装
- Manually select features 是自定义配置安装
选择Manually select features后

默认会帮你选择三个可以手动选择和取消配置(通过空格选择/取消)
Vue CLI v4.5.9
? 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)
>(*) Choose Vue version // vue版本
(*) Babel // 转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 Ja
( ) Progressive Web App (PWA) Support // 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vue-router(vue路由)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
(*) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // ***单元测试
( ) E2E Testing //**E2E测试,即端对端测试
选择完后直接enter,然后会提示你选择对应功能的具体工具包,选择自己擅长或者使用广泛的,简介如下:
1. 选择Vue.JS的版本,这里选择3.x版本

2.是否使用Class风格装饰器?这里选择yes

3.是否使用Babel与TypeScript一起用于自动检测的填充?这里选择yes

4. 路由模式是否需要?这里选择yes

5.选择CSS 预处理器?这里看个人需求,我选择Sass/SCSS (with dart-sass)

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? 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): (Use arrow keys)
> Sass/SCSS (with dart-sass) // 保存后编译
Sass/SCSS (with node-sass) // 实时编译
Less
Stylus
6.代码格式化检测,如果用typescript可以选择TSLint,其他看自己需求?这里选择ESLint + Prettier正常模式

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? 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): Less
? Pick a linter / formatter config:
> ESLint with error prevention only // typescript格式验证工具
ESLint + Airbnb config // 只进行报错提醒
ESLint + Standard config // 不严谨模式
ESLint + Prettier // 正常模式
TSLint (deprecated) // 严格模式
7.选择语法检查方式?这里选择选择语法检查方式,这里我选择Lint on save保存就检测

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? 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: Prettier
? 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时候检查
8.选择单元测试?这里选择Mocha + Chai

9.e2e测试:?这里选择Cypress (Chrome only)

10.把babel,postcss,eslint这些配置文件放哪?这里选择In dedicated config files放独立文件夹

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Lint
er, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? 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: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
In package.json // 放package.json里
11.是否保存此次配置?我选择no。键入N不记录,如果键入Y需要输入保存名字,如第一步所看到的自定义配置后保存好的模板

等待下载依赖模块
装好后通过cd进入项目的根目录,根据提示启动即可
- vue2.0默认启动文件:
npm run dev
- Vue3.0+默认启动文件:
npm run serve
网友评论