Vue2.x项目搭建-无脑使用

1.配置 npm 源，加快模块下载速度

node.js环境不写自己去看别的

安装 nrm（npm 源管理器）：npm install –g nrm

查看 nrm 当前可用源：nrm ls

切换到 taobao 源：nrm use taobao

检查是否更换成功：npm config get registry

2.

使用 vue-cli 创建项目

在用户主目录打开 cmd 控制台，按回车直接进入当前目录cmd

在控制台完成以下操作：

（1）vue create vue-demo

（说明：vue-demo 是项目名称，可自行命名，不能使用大写，路径最好不要带中文。）

（2）选中 Manually ...，手动配置模式

（说明：用上下键选择，选中后按回车键）

（3）选择 feature，包括：Babel，Router，Vuex，Linter / Formatter

（说明：用上下键选择，选中后按空格键，全部设置好后按回车键）

（4）选择 Vue.js 版本

（5）确定路由模式

（说明：输入 y, 表示使用 history 模式）

（6）确定 ESLint 配置，建议选择 ESLint + Prettier

（7）安装成功显示

项目目录结构说明

在控制台输入命令：

cd vue-demo

code .

打开 vscode 后，展开项目目录，查看项目结构。以下是相关文件的简单说明：

｜- node_modules 项目本地依赖包安装目录

｜- public 静态资源，不经过 webpack

｜- src 源代码目录

｜- assets 静态资源，经过 webpack

｜- components 复用组件

｜- router 前端路由

｜- store 集中式存储

｜- view 页面组件 ｜- App.vue 根组件

｜- main.js 入口文件

｜- package.json 包配置

｜- vue.config.js 项目配置文件

cd到你创建的项目

例如

然后vue-hospital

运行命令：npm run vue-hospital，构建运行项目，在浏览器地址输入：http://localhost:8081，观

察程序运行效果。