本文约定 $ 以后的为终端命令输入。

安装环境

---

1、借助node.js环境里的npm来安装

node.js安装教程请移步

如果觉得npm下载速度缓慢，则请安装镜像比如淘宝的cnpm镜像：

$ npm install -g cnpm –registry=https://registry.npm.taobao.org

即可安装npm镜像，以后再用到npm的地方直接使用cnpm来代替就好了。

2、安装webpack

$ npm install webpack -g

如果安装不成功是权限问题请输入
$  sudo npm install webpack -g

输入密码

安装成功

+webpack@4.44.1

检测webpack是否安装成功

$  webpack -v

4.44.1

3、安装vue脚手架 vue-cli

$ npm install -g vue-cli

检测vue是否安装成功 注意-V是大写

$ vue -V

2.9.6

4、进入存放文件根目录（2020work）为创建项目的根目录，不建议在项目开发中出现“中文”因为会出现未知错误

$ cd 202work

5、创建项目（项目文件名不能用驼峰命名，要用短横线拼接）(mobile_vue)项目名称

$ vue init webpack mobile_vue

配置想直接全部回车确认默认的就好

项目配置文件加载 创建完成 文件创建完成目录

6、因为各个模版之间都相互依赖，所以要安装依赖，(进入项目文件路径)在根目录下输入

$ npm install

加载依赖完成

安装依赖完成后会多出node_modules 文件夹，则是依赖文件，再项目仓库中不要进行上传

依赖文件node_modules 编辑器打开文件目录

build中配置了webpack的基本配置、开发环境配置、生产环境配置

config中配置了路径端口值等

node_modules为依赖的模块

src放置组件和入口文件

static放置静态资源文件

index.html文件入口

7、测试一下项目里面默认的app.vue（src目录里）模块能否跑起来，这是需要先安装一下服务器环境，在命令行中输入

$ npm run dev

就会自动打开这个页面（地址栏是http://localhost:8080/#/  8080是端抠号）

启动项目后 监听事件 启动后结果页