vue06安装vue-cli+使用vue-cli搭建项目+什么是*.vue文件+开发示例+必问面试知识点

vue init webpack xxx

npm install -g vue-cli

vue -V

vue init webpack spa1

Runtime + Compiler: recommended for most users //运行加编译，官方推荐
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere//仅运行时

npm install

npm run dev

npm install element-ui -S

{
  "name": "spa1", //项目名称:1.name中不能包含大写字母name;2.不能以"."(点)或者"_"(下划线)开头
  "version": "1.0.0", //项目版本
  "description": "A Vue.js project", //项目描述
  "author": "", //作者
  "private": true, //如果你不希望授权别人以任何形式使用私有包或未发布的包，设为true这个包将不会发布到NPM平台下
  "scripts": { //指定了运行脚本命令的npm命令行缩写，比如push指定了运行npm run dev时，所要执行的命令
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
  },
  "dependencies": { //指定依赖的其它包，这些依赖是指包发布后正常执行时所需要的，也就是线上需要的包。它们将会被安装在node_module目录下
  "element-ui": "^2.9.1",
  "vue": "^2.5.2",
  "vue-router": "^3.0.1"
  },
  "devDependencies": { //开发环境依赖包列表。这些依赖只有在开发时候才需要，它们将会被安装在node_module目录下
  //NPM使用语义版本号来管理代码，语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号
  //当代码变更时，版本号按以下原则更新。
  // 1.如果只是修复bug，需要更新Z位。
  // 2.如果是新增了功能，但是向下兼容，需要更新Y位。
  // 3.如果有大变动，向下不兼容，需要更新X位
  //version，必须匹配某个版本，如：1.1.2，表示必须依赖1.1.2版
  //>version，必须大于某个版本，如：>1.1.2，表示必须大于1.1.2版
  //~version，大概匹配某个版本，~1.1.2，表示>=1.1.2 <1.2.0
  //^version，兼容某个版本，如：^1.1.2 ，表示>=1.1.2 <2.0.0
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.22.1",
  "babel-helper-vue-jsx-merge-props": "^2.0.3",
  "babel-loader": "^7.1.1",
  "babel-plugin-syntax-jsx": "^6.18.0",
  "babel-plugin-transform-runtime": "^6.22.0",
  "babel-plugin-transform-vue-jsx": "^3.5.0",
  "babel-preset-env": "^1.3.2",
  "babel-preset-stage-2": "^6.22.0",
  "chalk": "^2.0.1",
  "copy-webpack-plugin": "^4.0.1",
  "css-loader": "^0.28.0",
  "extract-text-webpack-plugin": "^3.0.0",
  "file-loader": "^1.1.4",
  "friendly-errors-webpack-plugin": "^1.6.1",
  "html-webpack-plugin": "^2.30.1",
  "node-notifier": "^5.1.2",
  "optimize-css-assets-webpack-plugin": "^3.2.0",
  "ora": "^1.2.0",
  "portfinder": "^1.0.13",
  "postcss-import": "^11.0.0",
  "postcss-loader": "^2.0.8",
  "postcss-url": "^7.2.1",
  "rimraf": "^2.6.0",
  "semver": "^5.3.0",
  "shelljs": "^0.7.6",
  "uglifyjs-webpack-plugin": "^1.1.1",
  "url-loader": "^0.5.8",
  "vue-loader": "^13.3.0",
  "vue-style-loader": "^3.0.1",
  "vue-template-compiler": "^2.5.2",
  "webpack": "^3.6.0",
  "webpack-bundle-analyzer": "^2.9.0",
  "webpack-dev-server": "^2.9.1",
  "webpack-merge": "^4.1.0"
  },
  "engines": { //指定包运行的环境   jdk1.8+tomcat8.5
  "node": ">= 6.0.0",
  "npm": ">= 3.0.0"
  },
  //根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器
  //last 2 versions：CanIUse.com追踪的IE最新版本为11,向后兼容两个版本即为10、11
  "browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
  ]
}

<template>
    <div>
        ...
    </div>
</template>

<script>
    export default {
        name: 'App'
    }
</script>

const config = require('../config')

index: path.resolve(__dirname, '../dist/index.html'),

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
//在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default {
  name: 'Welcome',
  //组件的数据对象必须是函数形式定义
  //在定义data时也可以像HelloWorld中那样不带function关键字，效果是一样的
  //HelloWord中为简写形式
  data: function() {
    return {
      msg: 'Welcome to my App'
    }
  }
}
</script>
<!-- scoped表示定义的样式只在当前组件中有效 -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
</style>

import Welcome from '@/components/Welcome'
export default new Router({
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'Welcome',
      component: Welcome
    }
  ]
})

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>关于我们</h1>
   </div>
</template>
<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'About',
      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {
        }
      }
  }
</script>
<style>
</style>

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>用户管理</h1>
   </div>
</template>
<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserMsg',
      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {
        }
      }
  }
</script>
<style>
</style>

import About from '@/views/About'
import UserMsg from '@/views/UserMsg'
....
    {
        path: '/About',
        name: 'About',
        component: About
    },
    {
        path: '/UserMsg',
        name: 'UserMsg',
        component: UserMsg
    }

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      <router-link to="/UserMsg">用户管理</router-link>
      <router-link to="/About">关于我们</router-link>
    </p>
    <!-- 这里的配置的router-view是没有效果的，起效的时候App.vue中的
    router-view，这一点通过页面效果可以看出来，在点击“用户管理”或“关于我们”
    后，msg定义的提示信息没了，但vue的logo还在。
    <div>
      <router-view/>
    </div> -->
  </div>
</template>
<script>
//在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default {
  name: 'Welcome',
  //组件的数据对象必须是函数形式定义
  //在定义data时也可以像HelloWorld中那样不带function关键字，效果是一样的
  //HelloWord中为简写形式
  data: function() {
    return {
      msg: 'Welcome to my App'
    }
  }
}
</script>

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>用户注册</h1>
   </div>
</template>
<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserRegister',
      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {
        }
      }
  }
</script>
<style>
</style>

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>修改密码</h1>
   </div>
</template>
<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserPwdUpdate',
      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {
        }
      }
  }
</script>
<style>
</style>

import UserRegister from '@/views/UserRegister'
import UserPwdUpdate from '@/views/UserPwdUpdate'

//此处只显示了用户管理部分路由配置，为嵌套路由
    {
      path: '/UserMsg',
      name: 'UserMsg',
      component: UserMsg,
      //注意children单词不要写错，如果写错程序不会报错，但效果出不来!!!!
      //以"/" 开头的嵌套路径会被当作根路径，所以子路由的path不需要添加 "/" !!
      children: [
        {
          path: 'UserRegister',
          name: 'UserRegister',
          component: UserRegister
        },
        {
          path: 'UserPwdUpdate',
          name: 'UserPwdUpdate',
          component: UserPwdUpdate
        }
      ]
    }

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>用户管理</h1>
      <p>
        <router-link to="/UserMsg/UserRegister">用户注册</router-link>
        <router-link to="/UserMsg/UserPwdUpdate">修改密码</router-link>
      </p>
      <div>
        <!--
        用户注册于密码修改为用户管理的子模块，所以在用户管理组件中
        使用router-view用于展示用户注册与密码修改组件。如果此处不用
        则点击用户注册与密码修改时没有任何效果
        -->
        <router-view/>
      </div>
   </div>
</template>
<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserMsg',
      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {
        }
      }
  }
</script>