项目创建目录结构
1. 初始化
npm 初始化 -y
2.安装依赖 2.1 生产环境依赖
npm install vue vue-router -S
2.2 开发环境依赖
npm install babel-loader babel-core vue-loader node-sass sass-loader css-loader style-loader webpack webpack-cli webpack-dev-server html-webpack-plugin vue-template-compiler -D
一些依赖项起作用：
babel-core的功能就是将js代码解析成ast，方便各个插件分析句型进行相应的处理。 有些新的句型在低版本的js中是不存在的，比如箭头函数、rest参数、函数默认值等。这种语言层面的不兼容，只能通过转换代码，分析其句型，转为ast ，然后转换为Low版本js。 首先安装 babel-core。
babel-loader的作用：使用babel-loader处理js文件，es5以上通配句型（不能通配es6 API） babel-loader必须与babel-core结合使用，babel-core封装了babel-loader，需要使用了API
css-loader是帮助webpack打包和处理css文件的工具
html-webpack-插件
node-sass 允许用户以令人难以置信的速度将 .scss 文件本地编译为 css，并通过 join 中间件手动编译。 Sass 是一种预处理器脚本语言，可以解释或编译为级联样式表 (CSS)
sass-loader 是转换编译scss文件的node-sass是核心插件
style-loader将css-loader打包的css代码插入到html文件中作为标签
vue-loader 会解析文件，提取每个语言块，如果需要的话通过其他加载器进行处理webpack vue搭建，最后将它们组装成一个 commonjs 模块
vue-template-compiler 作用：该模块可用于将 Vue 2.0 模板预编译为渲染函数（template => ast => render），以防止运行时编译开销和 CSP 限制。 大多数场景下，它是与vue-loader一起使用的，只有在编译有非常特定需求的重构工具时才需要单独使用。 内容安全策略 (CSP) 是附加的安全层webpack vue搭建，旨在帮助衡量和减轻各种类型的攻击，包括跨站点脚本 (XSS) 和数据注入等攻击。
webpack模块打包工具
webpack-cli 用于在命令行运行webpack，cli是命令行界面（Command Line Interface）
webpack-dev-server可以为webpack打包生成的资源文件提供web服务
3、配置项目启动并执行脚本命令 3.1 在package.json文件scripts中添加代码
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js"
},
3.2 并将“main”:“index.js”改为“main”:“webpack.config.js”，（后续补充：发现现在不能改了） 3.3 最终完整的package.json内容为
{
"name": "vue2",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.14",
"vue-router": "^3.5.3"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.5.0",
"node-sass": "^7.0.0",
"sass-loader": "^12.4.0",
"style-loader": "^3.3.1",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
}
}
4、在项目根目录下创建文件index.html
//index.html 在body元素下增加id为app的div元素，用于挂载vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
5.创建src文件夹5.1在src下创建5.2 main.js，引入vue vue-router风格构建vue实例等
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
el: '#app',
router,
render: h => h(App)
})
// render: h => h(App)是ES6的写法，其实就是如下内容的简写：
// render: function (createElement) {
// return createElement(App);
// }
// 然后ES6写法,
// render: createElement => createElement(App)
// 然后用h代替createElement，使用箭头函数来写：
// render: h => h(App)
// 官方文档中是这样的，createElement 是 Vue.js 里面的 函数，这个函数的作用就是生成一个 VNode节点，
//render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。
// 也就是说，createElement 函数是用来生成 HTML DOM 元素的，而上文中的 Hyperscript也是用来创建HTML结构的脚本，这样作者才把 createElement 简写成 h。
5.3views/home.vueviews/content.vue分别是
Home
Content
5.4 /src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
title: '首页',
component: () => import('../views/home.vue')
},
{
path: '/content',
name: 'content',
title: '内容',
component: () => import('../views/content.vue')
}
]
const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) => {
console.log(to)
next()
})
export default router
5.5App.vue
export default {
data() {
return {};
},
};
#nav {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 20px;
/* router-link标签会默认渲染为a标签 */
a {
// text-decoration: none;
color: black;
font-weight: bold;
/* 当router-link被点击时候的样式 */
&.router-link-exact-active {
color: #42b983;
}
}
}
6、根目录下创建并配置webpack.config.js文件
//webpack 是一个用于现代 JavaScript应用程序的静态模块打包工具。当 webpack处理应用程序时，
//它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
// loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
//想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
//多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const config = {
//入口文件 入口起点(entry point)指示webpack应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。
//进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
entry: path.join(__dirname, 'src/main.js'),
//输出文件 output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
output: {
filename: 'bundle.js',//filename: 配置输出文件名，可添加路径配置(例子中js/)
path: path.join(__dirname, 'dist')//path: 文件的输出路径，必须是绝对地址
},
//通过选择 development（生产模式）, production（开发模式）或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。
//其默认值为 production。
mode: 'development', // 设置mode,
module: {
rules: [
{
test: /.vue$/,//test 属性，识别出哪些文件会被转换。
use: 'vue-loader',// use 属性，定义出在进行转换时，应该使用哪个 loader。
},
{
test: /.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
plugins: [
new VueLoaderPlugin(),
//生成html页面并导入bundle.js，如果配置了filename则以项目中filename指定的html为模版
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
})
]
}
module.exports = config
最终npm run dev页面的效果是
这样一个简单的vue就搭建好了
- - - - - - - - - - - - - - - - - - - - -分向線 - - - - ------------------------------------------
接下来是添加 vuex axios element-ui 等。
七、vuex 7.1 安装vuex
npm install vuex
7.2 使用vuex
在main.js中注入vuex
import Vuex from 'vuex'
import store from "./store";
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
一个完整的项目示例
发表评论