使用脚手架创建vue项目

1. 使用vue-cli3.0创建一个项目

1.1 使用命令方式创建一个项目
  快速原型开发命令： vue create 项目名

vue create maw //创建一个名为mzw的vue项目

1.2 使用图形界面创建一个项目
  使用命令 vue ui

项目目录结构

1. package.json
2. babel.config.js 编译es6用的,把es6转变成js5
3. .gitignore git忽略的文件或文件夹
4. src 源代码存放的地方
5. public 放置公共的文件

2.这个时候，我们的项目已经创建完成 (开始实现静态页面)

 首先我们要把项目分块,分成各种组件,然后先创建项目组件,把结构搭建起来,然后实现静态页面
第一步 .在终端输入 vue ui 到ui页面上安装自己需要的依赖
 例如依赖less 和less-loader 这步是先把vue静态页面实现

2.这个时候，我们的项目已经创建完成（开始配置路由）

2.1. 安装 npm install vue-router --save-dev

• 官方文档: https://router.vuejs.org/zh/installation.html#npm
• 路由配置 简书链接: https://www.jianshu.com/p/1c4af3374c1f

3. 配完路由后，我们开始实现页面了

3.1安装axios用来获取数据,安装axios 命令 npm install axios --save-dev
然后我们可以简单配置一下axios

import Vue from 'vue';//引入vue
import axios from 'axios'//导入axios
Vue.prototype.axios=axios;//把axios放到vue全局对象中
//根据开发阶段使用不同的地址
let env = 'prod';
// 开发
if (env === 'dev') {
  axios.defaults.baseURL = 'http://192.168.1.67:3000/api';
} else if (env === 'test') {
  // 测试环境
  axios.defaults.baseURL = 'http://132.232.87.95:3000/api';
} else if(env === 'prod') {
  // 生产环境
  axios.defaults.baseURL = 'https://www.easy-mock.com/mock/5cd6318fd42821567f953e13/api';
}

3.2 项目中用到的一些技术
 3.2.1 父子组件传参  https://www.jianshu.com/p/aa2ac8059666
 3.2.2 methods computed filter watch  https://www.jianshu.com/p/827f3f595739
 3.2.3 Vuex 跨组件通信  https://www.jianshu.com/p/ebcdb5f571aa
 3.2.4 设置loading & 移动端适配（rem） https://www.jianshu.com/p/5bfbb9852a67
 3.2.5 Vue 城市页面渲染  https://www.jianshu.com/p/ffda225d67b0

aaa:快速原型开发

有时我们只要对单个 .vue 文件进行快速原型开发(或者只需要创建一个小 demo),这个时候我们就没必要创建一个项目，我们直接进行原型开发

1、vue serve

• （1）在开发环境模式下零配置，为 .js 或 .vue 文件启动一个服务器

文档地址: https://cli.vuejs.org/zh/guide/prototyping.html

步骤

1. 安装vue工具

npm install -g @vue/cli-service-global

2. 编写组件(app.vue)

   <template>
     <h1>Hello!</h1>
   </template>
   

3. vue serve App.vue
   

创建一个小型项目

1. 新建文件夹my-app

2. 在my-app下新建src文件夹

3. 在src文件夹下新建main.js

   import Vue from 'vue';
   import App from './App.vue';
   
   new Vue({
       render: h=>h(App)
   }).$mount('#app');
   

4. 在src文件夹下新建App.vue

   <template>
       <div>首页</div>
   </template>
   

5. 在my-app目录下,打开终端,输入

   vue serve ./src/main.js -o
   

6. 浏览器出现以下页面表示项目成功创建并运行

4、启动项目的多种方式
vue serve 使用了和 vue create 创建的项目相同的默认设置(webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件，这个入口可以是一个 .js 或一个 .vue 文件。如果没有指定入口，则会使用 src/App.vue

（1）npm run serve（完整的项目）
（2）vue serve ./src/main.js -o
（3）vue serve App.vue