Vue学习笔记

Vue学习笔记

1、安装环境

1. 安装node.js

2. 打开cmd执行node -v和npm -v可查看node和npm的版本

3. 安装node淘宝镜像加速器（cnpm)

   • npm install cnpm -g (-g为全局安装)

   • 或使用以下语句解决npm速度慢的问题：

     • npm install --registry=https://registry.npm.taobao.org

4. 安装vue-cli：cnpm install vue-cli -g

   • 是否安装成功，可以查看基于哪些模板创建vue应用程序，通常我们选择webpack,执行命令：vue list

 

2、创建第一个vue-cli应用程序

1. 创建空文件夹（可忽略）：我们在电脑上随便创建一个空的文件夹：例如：D:\Project\vue-study

2. 根据模板创建vue应用程序：创建一个基于webpack模板的vue应用程序。

    # 这里的myvue是我们的模块名字
    vue init webpack myvue
    ​
    # 然后一路选择no即可

3. 下载依赖：创建完毕后，cd进入到项目里面，执行npm install命令来完成依赖下载。

   下载的途中可能会报错，只需按照报错提示执行命令即可。

4. 运行项目：最后我们执行npm run dev来运行项目。

 

3、WebPack

1、什么是WebPack？

WebPack是一款模块加载器兼打包工具，我们平时用vue进行开发都是遵循ES6规范进行开发，而一些浏览器只支持ES5规范，导致不兼容问题，WebPack可以降低版本让浏览器兼容从而解决这个问题。

 

2、安装WebPack

 npm install webpack -g
 npm install webpack-cli -g

 

3、测试安装成功

• webpack -v

• webpack-cli -v

 

4、使用WebPack

1. 创建一个项目

2. 在项目里面创建一个名为modules的文件夹，文件夹下存放我们写的js文件

3. 在项目里面创建名为webpack.config.js文件，并写下如下代码：

    module.exports = {
        // 程序的入口
        entry: './modules/main.js',
        //输出到哪里
        output: {
            filename: './js/bundle.js'
        }
    }

4. 输入命令webpack，你会发现项目下面生成了一个dist文件夹，这就是我们打包的项目

5. 打包后的文件可以<script>标签被引入

6. 还可以通过webpack --watch命令进行监听，这个打包不会立即结束，修改过后可以被监听到，相当于热部署。

 

4、vue-route使用

1. 什么是vue-route,为什么要使用vue-route?

   • vue-route就是路由，当我们在vue想实现页面的跳转时，这时候就可以使用vue-route实现。

2. 安装vue-route

    # 在当前项目执行进行安装，安装完毕，模块下会有vue-router模块
    ​
    npm install vue-router --save-dev

   在下面代码加入入口文件

    import VueRouter from 'vue-router'
    ​
    // 安装路由
    Vue.use(VueRouter);

   路由的使用：

   1、首先在配置文件中配置我们的路由，下面代码配置了Content和Main组件两个路由

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    ​
    import Content from '../components/Content'
    import Main from "../components/Main";
    ​
    // 安装路由
    Vue.use(VueRouter);
    ​
    // 配置导出路由
    export default new Router({
      routes: [
        {
          // 路由路径
          path: '/content',
          // 名字
          name: 'content',
          // 跳转的主键
          component: Content
        },
        {
          // 路由路径
          path: '/main',
          // 名字
          name: 'main',
          // 跳转的主键
          component: Main
        }
      ]
    });

   2、在入口文件main.js中加入一下代码

    // 导入我们的路由配置文件
    // 注意这里我们的配置文件是在route文件夹下，名为index.js。直接导入文件夹，Vue会自动导入文件夹下的index.js文件
    import router from './router'
    ​
    // 在Vue对象中配置我们导入的路由
    new Vue({
      router,
      ...
    });

   3、在配完配置后，我们就可以在组件中实现页面跳转了

    <template>
        <!--实现页面的跳转-->
        <router-link to="/content">内容页</router-link>
        <router-link to="/main">主页</router-link>
        <router-view></router-view>
    </template>

    

5、ElementUI的使用

• 安装element-ui

  npm i element-ui -S

• 在程序入口文件main.js添加以下代码

  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  
  Vue.use(ElementUI);
  new Vue({
    el: '#app',
    render: h => h(App) // ElementUI
  });

   

6、创建项目完整过程

# 创建项目
vue init webpack hello-vue
# 进入项目目录
cd hello-vue
# 安装vue-router
npm install vue-router --save-dev
# 安装element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装SASS加速器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

 

7、嵌套路由

// 路由里面的children属性
export default new Router({
  routes: [
    {
      // 路由路径
      path: '/main',
      // 名字
      name: 'main',
      // 跳转的主键
      component: Main,
      // 嵌套路由
      children: [
        {path: '/user',name: 'user', component: User}
      ]
    }
  ]
});