vue-cli 脚手架创建vue项目

1、什么是vue-cli？

webpack 中文文档
搭建一个完整的vue框架和基于vue-cli创建一个项目

vue-cli就是Vue的脚手架工具，和我们工地看到的脚手架真是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。

2、vue-cli 脚手架的安装

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

安装之后，你就可以在命令行中访问 vue 命令

vue --version

如果原先的npm和vue-cli有问题，可以重新安装

# 安装最新版本的npm
npm install  -g npm
#使用下面三条语句中的某一条清除npm install的缓存
npm cache verify
npm cache clean
npm cache clean --force
#然后再安装
npm install -g @vue/cli
vue --version

3、VUE 创建项目

首先创建vue必须先安装node.js，安装vue-cli手脚架
使用 vue-cli3.x 的初始化方式创建项目

vue create hello-world # 运行此命令来创建一个新项目
vue create --help      # 帮助
vue ui                 # 以图形化界面创建和管理项目

使用 vue-cli2.x 的初始化方式创建项目

vue init webpack hello-world

安装项目依赖

npm install

如果vue搭建脚手架出现问题Command vue init requires a global addon to be installed，可以安装vue/cli-init

npm install -g @vue/cli-init

4、搭建好的项目的目录结构

npm run XXX是执行配置在 package.json 中的脚本，比如：

“scripts”: {
　　“serve”: “vue-cli-service serve”,
　　“build”: “vue-cli-service build”,
　　“lint”: “vue-cli-service lint”
},

5、安装 Vue Router

浅谈vue-router原理

npm install vue-router

import VueRouter from 'vue-router'
Vue.use(VueRouter)

6、 快速上手BootstrapVue

npm install bootstrap-vue bootstrap

yarn add bootstrap-vue bootstrap

import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

7、axios

npm install axios