基本使用

安装

npm i vue -D

配置

安装完成后，通过import Vue form 'vue' 引用报错：
You are using the runtime-only build of Vue
需要修改 vue 文件的指向，三种方法：

  1. 在 node_modules/vue/package.json 文件中的 ‘main’ 属性下，修改 vue 的文件指向
  2. 在 入口js 文件中 import 其他vueJS文件的正确的路径
  3. 在 webpack.config.js 文件中添加配置。
    1. resolve: {
    2. alias: {
    3. "vue$": 'vue/dist/vue.js'
    4. }
    5. }

    .vue 格式的文件处理

    1. 加载器安装

    1. npm install -D vue-loader vue-template-compiler

    2. wbepack.config.js 文件配置件配置

    1. const VueLoaderPlugin = require('vue-loader/lib/plugin')
    1. // 插件配置
    2. plugins: [
    3.  new vueloaderPlugin()
    4. ]
    5. // 规则添加
    6. rules: {
    7.  { test:/.vue$/, use: 'vue-loader' }
    8. }

    在vue组件页面中集成vue-router 路由模块

    1. npm i vue-router
    入口文件配置
    1. import VueRouter from 'vue-router' // 导入路由模块
    2. Vue.use(VueRouter) //安装路由模块
    3. var router = new VueRouter({  // 创建路由对象
    4.  routes: [
    5.      // code
    6.  ]
    7. }) 
    8. const vm = new Vue({
    9.  el: '#app',
    10.  render(c) { return c(App)}, // 把指定组件渲染到 el 区域
    11.  router // 挂在到Vue
    改造 App.vue 组件
    1. <template>
    2. <div>
    3. <h2>这是用户组件</h2>
    4.  <router-link to="/login">登录</router-link>
    5.  <router-link to="/register">注册</router-link>
    6.  <router-view></router-view>
    7. </div>
    8. </template>

    打包发布

    pack.json 文件中配置打包命令
    1. "script": {
    2.  "dev": "webpack",
    3.  "bulid": "webpack -p" // 用于打包的命令
    4. }
    1. npm run bulid
    在/dist中生成完整可上线项目代码

    小知识点