1.SFC 单文件组件 先创建一个inde.html
<!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>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
2.创建一个APP.vue
<template>
<div>
<p>
{{message}}
</p>
</div>
</template>
<script>
export default {
data(){
return {
message:'圆圆'
}
}
}
</script>
<style>
</style>
3.首先App.vue是没有办法直接引入index.html，所以需要一个入口文件main.js,在main.js中 先引入vue的createApp,通过createApp创建一个vue应用挂载在index.html
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
但是main.js中并不存在vue的代码，所以没办法使用vue的功能，这时候就需要将vue的代码下载下来，但是又引入其他其他的框架的话，代码就会十分混乱，所以这时候就需要npm包管理器。
- 接着执行 npm init -y 生成package.json,这个文件是包管理器的核心文件
- 后输入npm install vue就可以下载vue的代码,这时候就会在package.json内的dependencies增加vue依赖包。
- 同时还会生成package.lock.json,可以理解package.json是简易包管理文件，package.lock.json是详细包管理文件。
- 所有的依赖包代码都会生成在node_modules中。
4.用npm来管理依赖,但是源文件越来越多，所以需要webpack来进行打包，比如在index.html中插入多个js时，js文件的执行顺序又比较严格，所以就需要用webpack将js文件合并成一个文件。
5.将开发中的文件都放在src目录下面，创建webpack.config.json是webpack的配置文件， 这时候就需要安装 npm i —D webpack、webpack-cli、webpack-dev-server(-D是安装开发依赖，只是在开发时使用)。
6.依赖-将各种文件整合成浏览器认识的合并文件
- 并不是每个浏览器都认识ES6语法，所以需要Babel将高版本的代码转成低版本的代码，所以就需要babel-loader依赖，但是这个依赖还需要@babel/core、@babel/preset-env配合使用
- 接着浏览器也不认识vue单文件组件，需要vue-loader
- css部分还需要css-loader、vue-style-loader和vue-template-compiler依赖
- 最后还需要将html和js结合起来，所以还需要html-webpack-plugin
7.接着新建一个.babelrc.js文件
module.export = {
presets: ['@babel/preset-env']
}
8.配置webpack.config.js文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");// 需要{}
module.exports = {
entry: "./src/main.js",
module: {
rules: [
{ test: /\.js$/, use:'babel-loader'}, //注意这里的test后面不需要引号
{ test: /\.vue$/, use:'vue-loader'},
{ test: /\.css$/, use:['vue-style-loader','css-loader']}
],
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new VueLoaderPlugin()//配置VueLoaderPlugin插件配合将vue转成浏览器认识的文件
]
};
易错点：
9.package.json中设置npm script 命令行
"scripts": {
"serve": "webpack-dev-server --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
10.还需要git来进行版本管理 输入git init 生成.git 文件夹
- 需新建.gitignore文件
- 需要jsconfig.json文件配置
{
"compilerOptions": {
"target":"es5",
"module": "esnext",
"baseUrl": "./",
"paths": {
// 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
"@/*": ["src/*"]
},
// 解决prettier对于装饰器语法的警告
"experimentalDecorators": true,
// 解决.jsx文件无法快速跳转的问题
"jsx": "preserve"
},
//提高 IDE 性能
"exclude": ["node_modules", "dist", "build"]
}
11.最后利用vue create probject和 手写的cli进行比较
