不使用vue-cli脚手架构建一个项目

最新推荐文章于 2022-08-28 22:26:59 发布

诺小刀

最新推荐文章于 2022-08-28 22:26:59 发布

阅读量1.2k

点赞数 2

分类专栏： vue 文章标签：前端Vue的初使用

本文链接：https://blog.csdn.net/weixin_43196993/article/details/88781650

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.构建好项目的基本文件目录

新建一个文件夹vueOne，安装vue：npm i vue；
全局和本地安装webpack(由于已经全局安装，所以每次只需要本地安装即可),安装前初始化：npm init -y,接着本地安装：npm i webpack --save-dev；
在vueOne文件夹下新建src文件,在src文件下新建index.html（项目的首页）,main.js(项目的js入口文件),app.vue；
在项目的根目录下，即vueOne文件下，新建一个webpack.config.js文件，是一个配置文件；
在项目的根目录下，新建一个.babelrc.json的文件，是一个.json的配置文件；
在package.json“scripts”中配置： "dev": "webpack-dev-server --mode development --open --port 8000 --hot"；
//全局安装webpack-cli:
npm install webpack-cli -g

//局部安装webpack-cli
npm i webpack-cli --save-dev

//安装webpack-dev-server(来实现自动打包编译的功能)
npm i webpack-dev-server -D

//安装html-webpack-plugin(自动在内存中根据指定页面生成一个内存页面，并把自动打包好的js文件追加到页面中去)
npm i html-webpack-plugin -D

//安装style-loader,css-loader(打包处理.css文件)
npm i style-loader css-loader -D

//安装less-loader(打包处理.less文件)
npm install less-loader less -D

//安装node-sass,sass-loader(处理.sass文件)
npm install sass-loader -D
npm i node-sass -D

//安装url-loader filr-loader -d(处理图片的文件)
npm i url-loader file-loader - D

//安装babel-loader(处理字体文件的配置项)，通过Babel可以将高级语法转为低级语法
npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

//默认webpack无法打包.vue文件，需要安装相关的loader
npm i vue-loader vue-template-complier -D
项目的目录结构如下：

页面代码如下：

app.vue页面：

<template>
	<div>
		这是新的项目
	</div>
</template>
<script>
	export default {
		data(){
			return {}
		},
		methods:{}
	}
</script>
<style lang="scss" scoped>
	
</style>

index.html页面：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div id="app">
		
	</div>
</body>
<script>

</script>
</html>

main.js页面

//项目的js入口文件

//导入vue
import Vue from 'vue'

//导入路由模块
import VueRouter from 'vue-router'
//手动加载
Vue.use(VueRouter)

//导入vue-resource
import VueResource from 'vue-resource'
//手动加载
Vue.use(VueResource)

//设置全局请求地址
Vue.http.options.root = 'http://127.0.0.1:3000/';

import router from './router.js'

//导入app.vue
import app from './app.vue'

var vm= new Vue({
	el:'#app',
	render:c=>c(app),
	router
})

router.js页面：

import VueRouter from 'vue-router'

var router = new VueRouter({
	routes:[]
})
export default router

webpack.config.js：

var path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
var webpack = require('webpack')

module.exports = {
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
	},
	plugins:[
		new htmlWebpackPlugin({
			template:path.join(__dirname,'./src/index.html'),
			filename:'index.html'
		}),
		new VueLoaderPlugin(),//高版本的vue-loader需要配置VueLoaderPlugin
		new webpack.DefinePlugin({//配置浏览器中vue的调试工具
			'process.env':{
				NODE_ENV:'"development"'
			}
		})
	],
	module:{
		rules:[
		{test:/\.css$/,use:['style-loader','css-loader']},
		{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
		{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
		{test:/\.(jpg|gif|png|bmp|jpeg)$/,use:'url-loader?limit=57841&name=[hash:8]-[name].[ext]'},
		// limit给定的值是图片的大小，单位是byte，如果我们引用的图片大于或等于给定的limit值，则不会被转为base64格式的字符串，如果图片小于给定的limit值，则会被转为base64格式的字符串
		{test:/\.(ttf|woff|woff2|svg|eot)$/,use:'url-loader'},
		//处理字体文件的配置项
		{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
		//处理.vue文件的loader
		{test:/\.vue$/,use:'vue-loader'}
		]
	},
	//修改vue被导入时的包的路径
	resolve:{
		alias:{
			"vue":"vue/dist/vue.js"
		}
	}	
}

   在package.json中的“scripts”对象中新增一个 "dev": "webpack-dev-server --mode development --open --port 8000  --hot"，如下图所示：

在这里插入图片描述

诺小刀

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
不使用vue-cli脚手架构建一个项目

1.构建好项目的基本文件目录新建一个文件夹vueOne，安装vue：npm i vue；全局和本地安装webpack(由于已经全局安装，所以每次只需要本地安装即可),安装前初始化：npm init -y,接着本地安装：npm i webpack --save-dev；在vueOne文件夹下新建src文件,在src文件下新建index.html（项目的首页）,main.js(项目的...
复制链接

扫一扫