用脚手架搭建一个 vue 项目

一、需要安装 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: 让网页渐进式变成 App
• Router: 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 端口运行

如图

The_End