【vue】CLI脚手架

操作流程

1. 安装Nodejs

2. 配置npm镜像源、缓存目录

3. 安装vue cli脚手架

vue2：

npm install -g vue-cli

vue3:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

4. 创建vue项目

vue2:

vue init webpack <project-name>

vue3:

vue create my-project
# OR
vue ui

5. 运行项目

npm start

其他命令

卸载脚手架

# 卸载vue2脚手架
npm uninstall -g vue-cli 
# 卸载vue3脚手架
npm uninstall -g @vue/cli 

vue项目打包

vue run build

脚手架项目结构

myapp     # 项目名                 
  build/    # webpack打包使用的build依赖
  config/    # 项目配置目录
  index.html        # 项目主页
  node_modules/      # 项目中使用的依赖
  package-lock.json
  package.json
  src/              # vue的源代码【重点】
    App.vue          # 项目中根主键
    assets/          # 存放静态资源
    components/      # vue组件
    main.js          # 项目主入口
    router/          # 用来配置项目路由
  static/           # 其他静态

vue根实例在main.js中定义，它包含一个组件app.vue，所以
路由在router/index.js中配

安装新组件(axios)

在项目根目录执行命令：

npm install axios --save-dev

在main.js中引用：

import axios from 'axios'

axios改写为Vue的原型属性

Vue.prototype.$http=axios;

可以使用this.$http.get("")请求接口了