一、需要安装 node 环境
下载地址: https://nodejs.org/en/
中文网: http://nodejs.cn/
安装后为方便国内使用,可以把 npm 换成 taobao 的 cnpm (速度快)
npm install -g cnpm --registry=https://registry.npm.taobao.org
检查是否安装成功,查看版本号
二、全局安装 vue 脚手架
全局安装可能需要管理员权限( Windows 以管理员身份运行; Linux 加 sudo )
npm install -g @vue/cli
或者用 cnpm
cnpm install -g @vue/cli
简写
cnpm i -g @vue/cli
安装成功后可查看版本
vue -V (大写V)
三、创建项目
为方便编辑,我一般都在 vscode
里操作
1.比如创建一个叫 project 的项目
vue create project
如果安装了 cnpm 就会询问是否使用淘宝镜像(cnpm)
都可以,只是影响网速快慢,我装了 cnpm
,这里我填 Y
2.选择配置方式
说明:
Default (babel,eslint)
: 默认配置Manually select features
: 手动选择配置
键盘上下就可以选择,选 Manually select features
(最下面那个),俺不用默认配置
3.手动选择项目所需要的包
说明:
Babel
: Babel 编译,将 ES6 编译成 ES5,进行兼容TypeScript
: 给 JavaScript 添加特性的语言扩展Progressive Web App (PWA) Support
: 让网页渐进式变成 AppRouter
: Vue 路由Vuex
: Vue 状态管理CSS Pre-processors
: CSS 预编译器 (包括 SCSS/Sass、Less、Stylus)Linter / Formatter
: 代码检测和格式化Unit Testing
: 单元测试E2E Testing
: 端到端测试根据需求进行勾选,上下键选择,空格是取消或选中,选完最后回车
如图:
4.选择版本
5.路由是否采用 history 模式
选啥都可以,之后可以改
6.选择 CSS 编译方法
按需选择,我选的 Less
7.选择代码规范
我选的 Standard config
说明:
eslint with ...
: 只进行报错提醒;eslint + A ...
: 不严谨模式;eslint + S ...
: 正常模式;eslint + P ...
: 严格模式;
8.选择合适代码检验规范
选 lint on save
,也就是报存时检验
9.选择放置配置的文件
我选的第一个,放到一个独立文件里
10.是否保存配置为以后使用
先不保存 (N
)
11.安装完成
运行项目
其实安装完成后有提示
cd project (进入项目根目录)
npm run serve
会在本地 8000
端口运行