Vue(三)

Vue(三)

第一个vue-cli项目

vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板

环境配置

安装Node.js 官网下载地址，无脑下一步
在cmd中输入node -v和npm -v进行测试
安装淘宝镜像加速器(cnpm)，npm install cnpm -g
- 安装过程有点慢，安装完后尽量少用
安装vue-cli，cnpm install vue-cli -g
- vue list查看现有模板，测试是否安装成功

创建项目

新建项目

在项目目录下输入vue init webpack myvue新建项目
- Project name：默认myvue
- Project description：直接回车
- Author：输入作者
- Vue build：选第一个Runtime + Compiler
- 下面一路选no

项目初始化(以管理员身份运行)

cd myvue
npm install安装依赖环境
按照提示输入npm audit fix
npm rum dev启动项目
- 在IDEA中的Terminal运行，需要先以管理员身份运行IDEA
Ctrl+C停止运行

Webpack

Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)，当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle

安装

npm install webpack -g
npm install webpack-cli -g
测试：
- webpack -v
- webpack-cli -v

使用

创建项目
创建一个名为modules的目录，用于放置js模块等资源文件

编写代码

hello.js

//暴露一个方法
exports.sayHi = function () {
    document.write("<h1>hello</h1>")
}

main.js

var hello = require("./hello")
hello.sayHi()

新键webpack.config.js

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }
}

Terminal输入webpack进行打包
新键index.html导入打包后的js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="dist/js/bundle.js"></script>

</body>
</html>

可以通过webpack --watch实现热部署

vue-router路由

安装

在当前项目下输入npm install vue-router --save-dev

使用

导入并显式声明

import VueRouter from 'vue-router'

Vue.use(VueRouter);

测试

写两个组件
content.vue

<template>
  <h1>内容页</h1>
</template>

<script>
export default {
  name: "content"
}
</script>

<style scoped>

</style>

main.vue

<template>
  <h1>首页</h1>
</template>

<script>
export default {
  name: "main"
}
</script>

<style scoped>

</style>

新键route目录，index.js，配置路由

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 VueRouter({
  routes: [
    {
      //路由路径
      path: '/content',
      //路由名字
      name: 'content',
      //跳转的组件
      component: Content
    },
    {
      path: '/main',
      name: 'main',
      component: Main
    }

  ]
});

在main.js中导入路由

import Vue from 'vue'
import App from './App'
import router from './router'//自动扫描里面的路由配置

Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

在App.vue中进行路由测试

<template>
  <div id="app">
    <h1>Vue-Router</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Content from './components/content'
export default {
  name: 'App',
  components: {
    Content
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vue(三)

Vue(三)

第一个vue-cli项目

环境配置

创建项目

新建项目

项目初始化(以管理员身份运行)

Webpack

安装

使用

vue-router路由

安装

使用

测试

相关推荐