vue的脚手架vue-cli从创建项目到发布到线上使用

什么是 vue-cli

vue-cli 是 vue.js 的脚手架，用它可创建一套vue模板，可快速构建一个vue项目进而快速开发。

准备工作：
安装node，如果已经安装，此步可跳过。

没办法翻墙用谷歌的道友还是直接百度吧，关键词搜node，进入它的官网，英文或中文版官网都行，可以在首页直接点击下载，也可以去下载页根据你的系统版本选择node的版本去下载。如果以前没玩过node或者npm，建议直接下载最新的版本，因为后续有很多用npm安装的插件对npm及node的版本有要求。

下载完之后进行安装，新手的话我建议你直接用它默认的安装路径和配置，一般是在C盘，也不会占用你C盘多少内存，后续还能避免很多麻烦。
怎么安装，直接百度咯，这里咱们直接跳过，node里面包含了npm，所以node安装成功了就代表npm也存在了，可以快捷键 Ctrl+R ，输入cmd 打开命令行工具检测他们的版本 npm -v ，有版本号显示则表示安装成功。

来吧开始创建项目

如果没有安装webpack ，先安装webpack ，vue是基于webpack创建项目的。

npm install vue-cli -g     //安装vue-cli 脚手架
vue init webpack 项目名     //创建项目
cd 项目名    //进入项目根目录
npm run dev     //启动项目

项目结构是这样的：

刚创建时

项目文件介绍：
新手开发的话，build文件夹里的东西不用动。
config文件夹后期会用上，
node_modules是项目安装的各种插件依赖，
src 是你写代码的位置
static 是放静态文件的，比如css、img、iconfont字体文件啥的
.babelrc 是配置babel的
.editorconfig 是配置编辑器的
.eslintignore 是配置eslint规则下需要忽视的股则项
.eslintrc.js 是配置eslint规则的
.gitignore 是配置git 的忽略项
.postcssrc.js 目前不知道干啥的
index.html 主页

new Vue({
  el: '#app',   //el 挂载的dom所在地，这个app就是
  router,
  components: { App },
  template: ''
});

main.js 内容如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import axios from 'axios'
import FastClick from 'fastclick'

Vue.config.productionTip = false

axios.defaults.withCredentials=true
Vue.prototype.$ajax = axios
Vue.prototype.host = 'http://xxx.xxx.com'   //接口base地址

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

/**
 * 点击延迟
 */
FastClick.attach(document.body)

App.vue 的内容是这样的

如果开发的是手机端项目，需要去 index.html 文件里补上 meta 的其他配置项：

默认是这样的

要补充后面那几个，禁止用户缩放等 meta 配置

开发之前问一下运维，如果项目不能放服务器的根目录下，只能放在服务器的一个子目录里（因为服务器根目录下有项目，而导致不能放咱们的项目的情况），那么代码里引用 static 文件夹里的静态资源的路径就不能直接这样用：

因为图片出不来，会找不到路径。

而要用require来引入再使用：