【搭建vue 脚手架】

1.安装脚手架

全局安装 vue-cli
- 在命令行中输入 npm install -g vue-cli
- 安装完成后，检验是否安装成功，输入 vue-V (注意：这里是大写的 “V”)，如果出现版本号，则说明安装成功。
用 vue-cli 来构建项目。
- 首先，在D盘新建一个文件夹作为项目的存放地，然后cd到目录下，输入命令vue init webpack vue-demo，创建项目
- 等待模板下载成功后，会有一个交互式的选项让你选择：

安装完成后，安装提示，cd 到项目目录, 执行命令 npm install 进行初始化,下载依赖。
启动项目
安装axios: npm install axios --save-dev
安装vuex：npm install vuex --save
安装router：npm install vue-router

安装路由

　　模块化

　　新建router目录，新建routes js文件用来新建路由，模块化管理

1 const routers = [
2     {
3         path: '/policy',
4         name: 'Layout',
5         // redirect:'/example', // 重定向到保单查询页
6         component: () => import("../src/policy/policy")
7     },
8 ]
9 export default routers

router目录的index文件向外抛出路由

1 import Vue from 'vue';
2 import Router from 'vue-router'
3 import routeqqqqs from './routes'
4 
5 Vue.use(Router);
6 export default new Router ({
7     routes: routeqqqqs
8 })

在入口文件main.js 中引入路由

 1 import Vue from 'vue'
 2 import App from './App'
 3 import router from './router/index.js'
 4 
 5 Vue.config.productionTip = false
 6 
 7 /* eslint-disable no-new */
 8 new Vue({
 9   el: '#app',
10   router,
11   components: { App },
12   template: '<App/>'
13 })

APP.vue中

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- <HelloWorld/> -->
    <router-view></router-view>
  </div>
</template>

2.不使用脚手架如何搭建vue项目

新建目录：比如demo2

npm init -y 初始化项目

npm install --save vue 安装vue

npm install --save-dev webpack webpack-dev-server 安装webpack

　　npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install --save另一个是 npm install --save-dev，他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下，

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel的作用是将es6的语法编译成浏览器认识的语法es5

npm install --save-dev vue-loader vue-template-compiler 编译vue文件

npm install --save-dev css-loader style-loader 解析css

npm install --save-dev url-loader file-loader 打包文件图片

npm install --save-dev sass-loader node-sass 编译sass

npm install --save-dev vue-router 安装路由

router.js 路由