Vue新手入门【搭建项目】
前言 : 一入IT深似苦,唯有代码解忧愁;习得后端习前端,前后通吃可还行;
面试中经常出现这么一段对话:
面试官 : 会前端么?
我 : html、css、jquery、javascript有用过
面试官 : Vue有使用过么?
我 : (此刻内心有些无语)
于是便入手了Vue,俗话说的好:技多不压身(总有用到的时候)
1. Vue环境搭建
1.1安装node.js
首先需要去NodeJS官网下载并且安装Node.js,如果不会安装的童鞋,送你一个传送门,安装完成之后,打开cmd,输入node -v 查看node.js版本
注意:安装好node.js之后npm自动就安装好了,如果你需要全局使用的话,那么需要配置一下环境变量
1.2安装cnpm(因为npm是国外的,可能会导致下载依赖失败,推荐使用国内淘宝的cnpm)
运行命令:npm install -g cnpm --registry=http://registry.npm.taobao.org (-g是全局安装)
1.3安装脚手架工具(@vue/cli GUI)
如果已经安装vue-cli的话先卸载,执行命令:npm uninstall vue-cli -g
安装@vue-cli,运行命令:cnpm install -g @vue/cli,安装完成之后vue --version查看版本信息
顺便提一下@vue/cli和vue-cli的区别:版本不一样,前者版本比较高,后者是3.x之前的版本,@vue/cli自带GUI(图形化界面,3.0以上版本才有)(图片与命令相对应)
2. 创建Vue项目
前面环境都搭好了的话,直接开始初始化,初始化项目有很多种方式
vue-cli 2.x:vue init webpack 项目名
vue-cli 3.x:vue create 项目名,但是可以自由选择配置
我们以3.x版本为例
注意:上下键进行选择,空格选中,回车确定
第一步,选择模板
第二步,选择项目配置
第三步,根据上面的配置进行进一步的选择,完成之后,回车即开始构建项目
1 TypeScript
是否使用class风格的组件语法:Use class-style component syntax?
是否使用babel做转义:Use Babel alongside TypeScript for auto-detected polyfills?
2. Router 路由管理器
路由使用历史模式:Use history mode for router? (Requires proper server setup for index fallback in production)
3. CSS Pre-processors css预处理
选择CSS 预处理类型:Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
选项:
Less
Sass
Stylus
4. Linter / Formatter 代码风格、格式校验
选择Linter / Formatter类型:Pick a linter / formatter config:
选项:
TSLint
ESLint with error prevention only 仅错误预防
ESLint + Airbnb config Airbnb配置
ESLint + Standard config 标准配置
ESLint + Prettier
选择lint方式:Pick additional lint features
选项:
Lint on save 保存时检查
Lint and fix on commit 提交时检查
5. Unit Testing 单元测试
选择unit testing类型:Pick a unit testing solution: (Use arrow keys)
选项:
Mocha + Chai
Jest
6. E2E Testing E2E(End To End)即端对端测试
选择E2E testing类型:Pick a E2E testing solution: (Use arrow keys)
选项:
Cypress (Chrome only)
Nightwatch (Selenium-based)
7. 选择 Babel, PostCSS, ESLint 等自定义配置的存放位置
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
选项:
In dedicated config files 在专用的配置文件中
In package.json 在package.json
8. 将此作为将来项目的预置吗?
Save this as a preset for future projects?
选项:
In dedicated config files 在专用的配置文件中
In package.json 在package.json
9.保存预设为模板
Save preset as:
第四步,启动项目
第五步,查看网页,能够成功访问,那么恭喜你,已经学会了搭建一个简单的vue项目.
结束语 : 书山有路勤为径,学海无涯苦作舟(共勉);
(PS : 如果不对之处,还请多多指教,共同学习进步)