Vue3.0项目搭建指南 不使用cli脚手架（v2）
Vue3.0项目搭建指南前言一、先让Vue3能够运行1.初始化2.安装相关依赖3.编写项目文件和配置webpack前言本指南作用于帮助开发人员更清晰的了解Vue3.0的常用框架及其生态之间的关系，以及在不借助cli脚手架的情况下一步步将项目组装起来。文中所使用所有相关依赖如下环境以及工具nodeJS v.14.16.0 - 基于 Chrome V8 引擎的 JavaScript 运行环境npm v
Vue3.0项目搭建指南
前言
本指南作用于帮助开发人员更清晰的了解Vue3.0的常用框架及其生态之间的关系，以及在不借助cli脚手架的情况下一步步将项目组装起来。
提示：文章篇幅较长，建议收藏观看
文中所使用所有相关依赖如下
环境以及工具
nodeJS v.14.16.0 - 基于 Chrome V8 引擎的 JavaScript 运行环境
npm v6.14.11 - nodeJS的包管理工具
编译依赖
webpack v5.51.1 - 模块打包器
webpack-cli v4.8.0 - webpack的依赖
插件
html-webpack-plugin v5.3.2 - 简化Html的插件
项目依赖
vue v3.2.6 - 这个不用我多说了把
vue-loader v16.5.0 - vue3.0解析器
@vue/compiler-sfc v3.2.6 - vue-template-compiler的升级版
css-loader v6.2.0 - css解析器
style-loader v3.2.1 - css-loader的依赖
webpack-dev-server v4.1.0 - 基本的 web server
各种工具的依赖
less v4.1.1 - less css预处理语言
less-loader v10.0.1 - less的解析器
typescript v4.4.2 - javascript的超集
ts-loader - ts的解析模块
vue-class-component - 可让您以类样式语法制作 Vue 组件的一个库
一口气安装
npm install webpack webpack-cli html-webpack-plugin vue vue-loader @vue/compiler-sfc css-loader style-loader webpack-dev-server less less-loader
一、先让Vue3能够运行
1.初始化
> npm init -y
npm init -y的-y能够让你省去填写初始化信息的步骤
如果你的目录下出现了package.json文件，说明成功。
2.安装相关依赖
-
安装webpack
注意这里是在本地安装，而不是全局安装。> npm install webpack webpack-cli --save-dev -
安装Vue3和解析模块
> npm install vue@next > npm install vue-loader@next > npm install @vue/compiler-sfc -
安装css解析模块
> npm install css-loader > npm install style-loader -
对比一下文件差异（可以忽略版本）
//当安装好上述依赖之后，你的目录看起来应该是这样的 ———————————————————— |-/node_modules |-package.json |-package-lock.json ————————————————————package.json文件应该是这样的
{ "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^5.51.1", "webpack-cli": "^4.8.0" }, "dependencies": { "@vue/compiler-sfc": "^3.2.6", "vue": "^3.2.6", "vue-loader": "^16.5.0" } }
3.编写项目文件和配置webpack
-
创建文件夹和文件
//创建好的目录看起来应该是这样的 —————————————————————— |-/node_modules |-/dist |-index.html |-/src |-App.vue |-main.js |-package-lock.json |-package.json |-webpack.config.js ———————————————————————接下来我们按照顺序配置各个文件（也可以不按顺序）
webpack.config.js
dist > index.html
src > App.vue
src > main.js
package.json -
配置webpack.config.js文件
const path = require('path'); //vue-loader@next版本之后需要引入这个插件 const { VueLoaderPlugin } = require('vue-loader') module.exports = { entry: './src/main.js', //打包的入口 //设置打包的出口 output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), }, //设置别名 resolve:{ alias: { '@': path.join(__dirname, 'src') }, }, //添加模块 module:{ rules:[ {//设置.vue文件的解析规则 test: /\.vue$/, loader: 'vue-loader' }, {//设置css的解析规则 test:/\.css$/, use:[ {loader:'style-loader'}, {loader:'css-loader'}, ] }, {//设置加载图片资源的规则 test: /\.(png|jpe?g|gif)$/i, type: 'asset/resource' }, ], }, devtool: 'inline-source-map', //错误追踪工具 plugins:[ new VueLoaderPlugin() ] }; -
配置dist > index.html 文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>起步</title> </head> <body> <div id="app"></div> <script src="main.js"></script> </body> </html> -
配置src > App.vue 文件
<template> <div>hello world</div> </template> <style> div{color:red;} </style> -
配置 src > main.js 文件
import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app') -
修改package.json文件
主要是使项目私有化，以及增加一个build编译命令
注意，这里只展示了部分代码，并不是全部，请参照带有“+”、“-”符号进行增加或删除，后续基于原有文件进行修改的示例都将会采用这种方式展示。{ "description": "", - "main": "index.js", //符号“ - ”代表删除这一行代码 + "private": "true", //符号“ + ”代表添加这一行代码 "scripts": { + "build": "webpack" }, }
4.运行项目
// 编译项目
> npm run build
运行npm run build命令等待编译完之后，双击打开dist > index.html 文件，如果页面出现红色字体的hello world那说明Vue3项目运行成功了。
做到这一步，我们的项目已经可以编译运行了，但还远远达不到开发环境的标准，我们不能该一行代码运行一遍npm run build，并且dist也不会每次编译都会自动生成，接下来我们来完善一下。
二、完善开发环境
1.安装html-webpack-plugin
htmlWebpackPlugin能让你省去在dist下创建index.html的麻烦，它能够自动根据main.js创建html文件，或者可以自定义模板。
> npm install --save-dev html-webpack-plugin
2.安装webpack-dev-server
webpack-dev-server提供了一个基本的web server环境，并且内置了热更新功能，但是我们并不需要，因为vue-loader已经有热更新了。
> npm install --save-dev webpack-dev-server
3.配置开发环境
- 新建一个html模板给html-webpack-plugin
目录下新建一个public文件夹，再新建一个index.html放到public目录下
index.html文件内容—————————————————————————— ... |-/dist + |-/public + |-index.html |-/src ... ——————————————————————————<!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> - 配置html-webpack-plugin 和 webpack-dev-server
注意，这里只展示了部分代码，请参照带有“+”、“-”符号进行增加或删除
webpack.config.js文件const path = require('path'); //vue-loader@next版本之后需要引入这个插件 const { VueLoaderPlugin } = require('vue-loader') + const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/main.js', //打包的入口 //设置打包的出口 output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), + clean:true //每次打包会清除之前的代码 }, /...中间代码忽略.../ plugins:[ new VueLoaderPlugin(), + new HtmlWebpackPlugin({ + filename:'index.html', //配置输出后的html文件名（可携带目录） + template:'./public/index.html' //配置模板 + }) ], //配置webpack-dev-server将dist下的目录代理到web server + devServer: { + static:'./dist' + } }; - 添加启动命令
... "private": "true", "scripts": { "build": "webpack", + "dev": "webpack serve --mode development" }, "keywords": [], ...
4.启动项目
> npm run dev
配置正确的话应该是图下所示
命令执行完毕后，我们可以通过上图红框的地址访问我们的项目。
到了这一步，我们已经有了一个简易的Vue3的开发环境了，实现了热更新开发，和打包项目的基本功能。
下面放上到这个步骤的项目代码。
github仓库地址
三、安装各种工具
1.使用less和less的解析器
> npm install less less-loader
webpack.config.js 以下为部分代码
...
//在module下的rules添加解析less的规则
{
test:/\.less$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'},
{loader:'less-loader'}
]
}
...
在代码里的style标签添加 lang属性，安装scss啥的，都这个逻辑，先下载，在配置解析规则，然后使用。
2.使用Typescript
安装ts和ts的解析模块
> npm install typescript ts-loader
> npm install vue-class-component
webpack.config.js增加配置
resolve:{
alias: {
'@': path.join(__dirname, 'src')
},
+ extensions: ['vue', '.js', '.ts']
},
...
rules:[
+ {
+ test: /\.tsx?$/,
+ loader: 'ts-loader',
+ exclude: /node_modules/,
+ options:{
+ appendTsSuffixTo:[/\.vue$/],
+ }
+ },
],
项目根目录新建一个tsconfig.json文件
{
"compilerOptions": {
"sourceMap": true,
// 严格模式
"strict": true,
// 处理模块
"moduleResolution": "node",
// 编译输出 ES5 版本
"target": "es5",
// 启用装饰器
"experimentalDecorators": true
}
}
接下来是src目录下的main.js，改个后缀就可以了，把js改成ts。
然后src目录下新增一个声明文件shims-vue.d.ts
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
接下来是App.vue文件中的sciprt部分
<script lang="ts">
import { Vue, Options } from "vue-class-component";
@Options({
created(){
const a:string = '123'
console.log(a)
}
})
export default class App extends Vue {
}
</script>
一个最简化的Vue3+ts运行环境就完成了，后续可以根据自己需要配置相关框架和插件
待更新。。。。
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献3条内容
所有评论(0)