系列文章
vue 学习 01 —— 基本语法
vue 学习 02 —— vue-cli项目、Webpack、vue-router
vue 学习 03 —— ElementUI
四、第一个vue-cli项目
什么是vue-cli
vue-cli是官方提供的一个脚手架，是一个人用于快速生成vue的项目模板；
使用预先定义好的目录结构和基础代码，就像我们在创建Maven项目时可以选择创建一个骨架项目。
主要功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
环境
-
Node.js：http://nodejs.cn/download/，这里要安装14版本，不要装15。（cmd下用
node -v，npm -v看是否有版本号，有表示安装成功） -
安装node.js 淘宝镜像加速器(cnpm)：
npm config set registry https://registry.npm.taobao.org -
指定安装路径：（npm和cache文件自己创建）
npm config set prefix "D:\Environment\npm"npm config set prefix "D:\Environment\npm\cache" -
安装vue-cli：
npm install -g @vue/cli -
添加系统环境变量：把
D:\Environment\npm添加到Path中，再新建一个vue变量，也添加这个路径。
-
输入
vue --version检查版本是否正确
创建项目
文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
可视化创建：输入命令vue ui，直接选则默认就好。
用IDEA 打开这个项目:
会让你安装插件：
输入vue serve启动，然后在浏览器输入localhost:8080访问：
在终端按Ctrl+C终止项目：
注意：vue-cli3是没有config文件的，需要自己建。（这个文件用于配置vue）
在根目录下新建vue.config.js
五、Webpack
它就是一个打包工具，很多时候我们去网上找到前端模板，它的JS我们都看不懂，是因为直接将很多个模块打包到一起了。下面演示一下Webpack的作用。
注意：vue里面使用的是vue-cli3，它已经高度集成了Webpack，所以这里按照webpack对vue-cli没什么意义，只是演示下webpack的作用
安装：（实际上vue-cli3已经内部集成了，用npm run build）
npm install webpack -gnpm install webpack-cli
创建项目：
-
创建一个空文件夹，作为项目文件夹。
-
用IDEA打开该文件夹，创建以下目录结构：
hello.js
//exports 用于暴露一个方法，使得其他模块能够调用该方法。 exports.sayHay = function () { document.write("<h1>Hello JS</h1>");//JS 操作DOM，生成一个标签 };main.js
//main.js作为所以JS的主入口，打包后，从该JS进入 //导入hello.js（作用类似于Java的import类） var hello = require("./hello"); hello.sayHay();//相当于调用hello类的方法webpack.config.js
//在这里控制打包 module.exports = { //入口 entry: "./modules/main.js", mode: "development",//这是新版要求的，指定模式 //输出路径 output: { filename: "./js/bundle.js" } };index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--前端的模块化开发，这里就像我们使用其他前端模板一样--> <script src="dist/js/bundle.js"></script> hello </body> </html> -
打包：在终端输入
webpack
-
运行：
六、vue-router路由
Vue Rounter是Vue.js官方的路由管理器，它和Vue.js深度集成，让构建单页面应用变得易如反掌。有了vue-router，
安装
在之前的第一个vue-cli项目的终端输入npm install vue-router --save
使用：修改之前的vue-cli项目
目录结构：
具体步骤：
-
写好组件 Content1.vue和Content2.vue（代码一样的）
<template> <div> <h1>内容1</h1> </div> </template> <script> export default { name: "Content1" } </script> <style scoped> </style> -
写好路由文件：router/index.js
import Vue from 'vue' import VueRouter from "vue-router" //导入三个自己写的组件 import Content1 from "../components/Content1"; import Content2 from "../components/Content2"; //1. 安装路由插件 Vue.use(VueRouter); //2. 创建并配置路由，export导出到外部 export default new VueRouter({ routes: [ { //路由路径：类似Java的@RequestMapping path: '/content1', name: 'content1',//可以不写 //跳转的组件 component: Content1 }, { //路由路径 path: '/content2', //跳转的组件 component: Content2 } ], //默认是hash模式，url带#，改为history模式，url不带#； mode: 'history' }); -
使用组件：App.vue
<template> <div id="app"> <!-- router-link类似于HTML的a标签 --> <router-link to="/content1">内容页1</router-link><br/> <router-link to="/content2">内容页2</router-link><br/> <!-- router-view 是显示模板的内容--> <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> -
在入口中挂载路由：main.js
import Vue from 'vue' import App from './App.vue' //自动扫描路由配置 import router from './router' Vue.config.productionTip = false; new Vue({ render: h => h(App), //vue实例挂载路由实例 router, }).$mount('#app');
转载：https://blog.csdn.net/qq_39763246/article/details/115766817