一、VUE项目的搭建

步骤：

1.环境搭建——》2.创建项目并启动项目——》 1. 环境搭建

共有3步

# 1. 安装node 去官网下载安装包，直接安装（官网：https://nodejs.org/zh-cn/） # 2. 安装cnpm 到command终端中，输入下面命令即可 npm install -g cnpm --registry=https://registry.npm.taobao.org # 3. 安装脚手架 到command终端中，输入下面命令即可 cnpm install -g @vue/cli # 清空缓存 （当前面的安装过程出错时，要先清空缓存，再重新安装） 到command终端中，输入下面命令即可 npm cache clean --force 2. 项目的创建和启动

注意：创建vue项目，用终端来的命令式创建最合适，不要用编辑器来创建

# 1. 在command终端中，先切换到项目要创建的路径下 # 2. 创建项目 vue create 项目名 # 在上面的第2步中，输入创建命令后还有一些配置，按照下面的图片操作即可（其中键盘上的上下方向键来选择选项，空格来确定选择） # 3. 启动项目 启动项目之前，***一定要切换到项目根目录下***，使用终端启动时，输入下面的命令 npm run serve # ********一定要注意是serve ，最后没有r

第二步配置截图

图一：

图二：

图三：

图四：

图五：

二、 开发项目

在vue项目创建成功后，基本的项目框架已经搭建好了。我们只需要用一个IDE（集成开发环境）打开项目就可以进行项目开发了。这里我们用pycharm来开发vue项目。

1. 配置vue项目启动功能

使用pycharm开发vue项目，这里我们要配置项目启动的功能，如下图。

图一：

图二：

图三：

图四：

2. 开发vue项目 （1）项目文件的作用

node_modules : 项目的依赖（不同电脑依赖需要重新构建），我们不用管

public : 存放项目的页面（因为vue框架是单页面开发，所以只含有一个index默认的页面），我们也不用动

src : 存放与项目本身相关的文件 。我们主要是在这个文件夹中开发。

assets：存放项目的静态文件（如导入的css，js等模块插件）

components：存放项目的小组件（与views文件夹中的组件是子父组件的关系，传参通过子传父或父传子的方式传参。）

router：存放项目的路由配置（路由与页面组件对应关系）

views：存放项目的页面组件（其中的组件与组件之间的传参通过路由传参的方法传参）

App.vue文件：项目的根组件，内部固定5行代码。（我们在views中自定义的页面组件最后都是将根组件的<router-view />替换掉，进行渲染）

<!--App.vue的5行代码--> <template> <div id="app"> <router-view/> <!--完成页面组件的占位--> </div> </template>

main.js ：项目总脚本文件（配置所有环境，加载根组件）（全局类型的环境都在改文件中配置）

（2）vue项目开发流程 # 1. 在views文件夹中，创建页面组件 # 2. 在router的index.js中配置页面组件的路由 # 3. 继续书写创建的页面组件，如果包含小组件，则需要在页面组件下方导入并挂载，数据通过vue组件的生命周期钩子来获取后端响应的数据 （3）vue项目的请求生命周期

浏览器对vue项目的url发送请求——》

router插件通过映射加载对应的页面组件——》

页面组件向后端url发送ajax请求，拿到响应数据——》

页面组件替换App.vue文件中的<router-view />占位符——》

App.vue最后把所有的模板和数据渲染到public文件夹中的index.html的根组件挂载点中——》