Vue相关软件安装及其项目构建

最新推荐文章于 2024-08-26 10:00:44 发布
最新推荐文章于 2024-08-26 10:00:44 发布
阅读量134 收藏
点赞数
分类专栏： VUE 文章标签： vue npm nodejs js 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nickel369/article/details/109191744
版权
本文详细介绍了Vue项目的构建过程，包括Webpack的安装、配置以及Vue的相关使用。从创建文件夹结构、配置Webpack到处理CSS、LESS样式，再到引入图片、转换ES6语法，最后讲解了Vue组件的创建与模块化，以及Webpack的优化，如添加版权说明、合并配置文件等。
摘要由CSDN通过智能技术生成

一 webpack的安装

1.查看是否有node node -v

在这里插入图片描述

2.查看是否有webpack --version

在这里插入图片描述
表示没有webpack，此时需要安装webpack
全局安装npm install webpack@3.6.0 -g
在这里插入图片描述
在这里插入图片描述

**局部安装npm install webpack@3.6.0 --save-dev
**

安装完成之后还是不是内部命令，可以参考
在这里插入图片描述
参看配置：https://www.cnblogs.com/fengchaoran/p/8461317.html
配置完成之后，然后再测试webpack --version,会出现以下界面，表示安装成功
在这里插入图片描述

二.webpack的起步

1.在文件夹下面建立两个文件夹，分别是dist(发布)和src(开发)，同时建立一个html文件

在这里插入图片描述

2.src下面建立两个文件分别是main.js和mainUtils.js文件

mani.js文件类容为

const {add,mul}=require('./mainUtils')

console.log(add(20, 30));
console.log(mul(30, 50));

mainUtils.js文件类容为

function add(num1,num2) {
	return num1+num2;
}
function mul(num1,num2) {
	return num1*num2;
}

module.exports={
	add,mul
}

3.进行打包，打包的命令为：webpack ./src/main.js ./dist/bundle.js

打包成功，显示

webpack ./src/main.js ./dist/bundle.js
Hash: 51b79ba7e5c6ccab3f92
Version: webpack 3.6.0
Time: 56ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.77 kB       0  [emitted]  main
   [0] ./src/main.js 94 bytes {0} [built]
   [1] ./src/mainUtils.js 131 bytes {0} [built]

E:\Study\webstorm\vue\LearnVuejs04-V2\01-webpack的使用\01-webpack的起步>

4.配置webStorm的Dos窗口，使得输入webpack就能直接编译浏览器可执行文件

4.1 完成文件的初始化，命令 :npm init

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

4.2 完成文件的依赖，命令 :npm install

在这里插入图片描述

4.3 配置webpack.config.js文件

1.在跟文件夹下面建立一个webpack.config.js文件，文件名只能为：webpack.config.js
在这里插入图片描述

const path =require('path');//这里路径的获取需要执行文件的初始化npm  init	
module.exports={
	entry:'./src/main.js',  ##执行文件的入口
	output: {
		filename:'bundle.js', ##执行文件的名字
		path:path.resolve(__dirname,'dist')  ##执行文件的全路径
	}
}

4.4输入命令：webpack，显示下面的页面表示成功

在这里插入图片描述

4.5 实现webpack文件的映射，映射到npm run build上

此时输入：npm run build 会进行打包
在这里插入图片描述
在这里插入图片描述

5.局部安装webpack

5.1 执行webpack时，此时找的是全局的包，由于版本的控制，此时需要找本地的包,所以需要安装本地包，安装本地命令：npm install webpack@3.6.0 --save-dev,此时执行webpack找到的包还是全局的，需要通过相应的包进行进入

在这里插入图片描述

6.配置css样式，加载到index.html中去

6.1安装相关的插件，6个

npm install style-loader --save-dev
npm i style-loader css-loader --save-dev
npm i postcss-loader --save-dev
npm i autoprefixer --save-dev
npm install postcss-import --save-dev
npm install --save-dev css-loader

6.2配置webpack.config.js配置文件

const path =require('path');
module.exports={
	entry:'./src/main.js',
	output: {
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist')
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [ 'style-loader','css-loader' ]
			}
		]
	}
}

6.3 在入口main.js中配置css文件的引入

console.log(mul(30, 50));

//2.使用es6的模块化
import {name,age,height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);

//3.依赖css文件
//require("./css/normal.css");
import css from './css/normal.css'

6.4 执行命令: npm run build

在这里插入图片描述

6.5 后台显示结果展示

在这里插入图片描述

7.配置less样式，加载到index.html中去

7.1 安装less文件

在这里插入图片描述

npm install less-loader@4.1.0  --save-dev

7.2 在main.js里面引入less文件

在这里插入图片描述

//1.使用common.js的模块化
const {add,mul}=require('./js/mainUtils')


console.log(add(20, 30));
console.log(mul(30, 50));

//2.使用es6的模块化
import {name,age,height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);

//3.依赖css文件
require("./css/normal.css");
//import css from './css/normal.css'

//4.引入less文件
require("./css/special.less")

7.3 配置webpack.config.js文件

在这里插入图片描述

const path =require('path');
module.exports={
	entry:'./src/main.js',
	output: {
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist')
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [ 'style-loader','css-loader' ]
			},
			{
				test: /\.less$/,
				use: [
					{
						loader: 'style-loader',
					},
					{
						loader: 'css-loader',
					},
					{
						loader: 'less-loader',
						options: {
							lessOptions: {
								strictMath: true,
							},
						},
					},
				],
			},
		]
	},

}

7.4 运行命令：npm run build,测试是否成功

在这里插入图片描述

8.在样式中添加背景颜色

8.1.安装图片相关的包

npm install --save-dev url-loader

8.2.把在webpack.config.js中配置url，注意limit表示图片大小的限制，大于图片，当大于限制时，此时需要安装：npm install file-loader@3.0.1 --save-dev

const path =require('path');
module.exports={
	entry:'./src/main.js',
	output: {
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist'),
		publicPath:'dist/'
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [ 'style-loader','css-loader' ]
			},
			{
				test: /\.less$/,
				use: [
					{
						loader: 'style-loader',
					},
					{
						loader: 'css-loader',
					},
					{
						loader: 'less-loader',
						options: {
							lessOptions: {
								strictMath: true,
							},
						},
					},
				],
			},
			//图片的配置
			{
				test: /\.(png|jpg|gif)$/,
				use: [
					{
						loader: 'url-loader',
						options: {
							limit: 1890000,
							name:'img/[name].[hash:8].[ext]',//配置图片的路径：src/1+8位hash+以前的后缀名
						}
					}
				]
			}
		]
	},

}

8.3.重新编译，命令为：npm run build

在这里插入图片描述

8.4图片显示结果

在这里插入图片描述

9.ES6转化为ES5,使得所有的浏览器都识别

9.1安装 babel-loader

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

9.2修改配置文件webpack.config.js，使得es6能够识别

const path =require('path');
module.exports={
	entry:'./src/main.js',
	output: {
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist'),
		publicPath:'dist/'
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [ 'style-loader','css-loader' ]
			},
			{
				test: /\.less$/,
				use: [
					{
						loader: 'style-loader',
					},
					{
						loader: 'css-loader',
					},
					{
						loader: 'less-loader',
						options: {
							lessOptions: {
								strictMath: true,
							},
						},
					},
				],
			},
			{
				test: /\.(png|jpg|gif)$/,
				use: [
					{
						loader: 'url-loader',
						options: {
							limit: 1890,
							name:'img/[name].[hash:8].[ext]',
						},

					}
				]
			},
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['es2015']
					}
				}
			}
		]
	},

}

9.3 运行命令：npm run build

在这里插入图片描述

二 VUE相关的使用

2.1 安装vue相关的jar包

npm install vue --save

2.2在main.js文件中进行配置vuejs的模板

//1.使用common.js的模块化
const {add,mul}=require('./js/mainUtils')


console.log(add(20, 30));
console.log(mul(30, 50));

//2.使用es6的模块化
import {name,age,height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);

//3.依赖css文件
require("./css/normal.css");
//import css from './css/normal.css'
document.writeln('<h2>你好呀，Nickel！！</h2>')

//4.引入less文件
require("./css/special.less")

//5.映入vue
import  vue from 'vue'

const app=new vue({
    el:"#app",
    data:{
        message:"Hello Webpack",
    }
});

2.3 当编译时，浏览器的控制台会报以下的错误

在这里插入图片描述

2.4 配置webpack.config.js，使得编译vue模板时通过compiler-included编译

const path =require('path');
module.exports={
	entry:'./src/main.js',
	output: {
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist'),
		publicPath:'dist/'
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [ 'style-loader','css-loader' ]
			},
			{
				test: /\.less$/,
				use: [
					{
						loader: 'style-loader',
					},
					{
						loader: 'css-loader',
					},
					{
						loader: 'less-loader',
						options: {
							lessOptions: {
								strictMath: true,
							},
						},
					},
				],
			},
			{
				test: /\.(png|jpg|gif)$/,
				use: [
					{
						loader: 'url-loader',
						options: {
							limit: 1890,
							name:'img/[name].[hash:8].[ext]',
						},

					}
				]
			},
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['es2015']
					}
				}
			}
		]
	},
	//vue模板无法正常编译的问题
	resolve: {
		alias: {
			'vue$':'vue/dist/vue.esm.js'
		}
	}
}

2.5在index.html文件中引入vuejs模板

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style></style>
</head>
<body>
<div id="app">
	<h1>{{message}}</h1>
</div>
<script src="./dist/bundle.js"></script>
<div id="div1">测试成功</div>
</body>
</html>

2.5执行命令：npm run build 进行编译

在这里插入图片描述

2.6显示结果

在这里插入图片描述

三 VUE相关的操作

一、不修改index.html模板，实现代码的展现

1.修改index.html代码

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style></style>
</head>
<body>
<div id="app">
</div>
<script src="./dist/bundle.js"></script>
<div id="div1">测试成功</div>
</body>
</html>

2.修改main.js实现，创建vue.js相关的代码

//1.使用common.js的模块化
const {add,mul}=require('./js/mainUtils')


console.log(add(20, 30));
console.log(mul(30, 50));

//2.使用es6的模块化
import {name,age,height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);

//3.依赖css文件
require("./css/normal.css");
//import css from './css/normal.css'
document.writeln('<h2>你好呀，Nickel！！</h2>')

//4.引入less文件
require("./css/special.less")

//5.映入vue
import  vue from 'vue'

new vue({
    el:"#app",
    template: `
      <div>
          <h2>{{message}}</h2>
          <button @click="btnClick">按钮</button>
          <h2>{{name}}</h2>
      </div>
    `,
    data:{
        message:"Hello Webpack",
        name:'Nickel'
    },
    methods:{
        btnClick(){
            alert(1);
        }
    }
});

说明：当vuejs里面有el和template时，当模板被加载的时候，此时template里面的内容会替换el位置的类容

二、对vue显示的字段进行提取，使得vue的代码在单独的文件中

1创建vue文件夹，创建app.js文件

在这里插入图片描述

2 在app.js里面加入编辑代码

export  default
{
    template: `
      <div>
          <h2>{{message}}</h2>
          <button @click="btnClick">按钮</button>
          <h2>{{name}}</h2>
      </div>
    `,
    data(){
        return{
            message:"Hello Webpack",
            name:'Nickel'
        }
    },
    methods:{
        btnClick(){
            alert(1);
        }
    }

3 在main.js文件中修改和并引入app.js,修改后文件为

//1.使用common.js的模块化
const {add,mul}=require('./js/mainUtils')


console.log(add(20, 30));
console.log(mul(30, 50));

//2.使用es6的模块化
import {name,age,height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);

//3.依赖css文件
require("./css/normal.css");
//import css from './css/normal.css'
document.writeln('<h2>你好呀，Nickel！！</h2>')

//4.引入less文件
require("./css/special.less")

//5.映入vue
import  vue from 'vue'
import  app from './vue/app'

new vue({
    el:"#app",
    template: '<app/>',
    components:{
        app
    }
});

4 修改后，编译展示结果为

在这里插入图片描述

三、模块化分离二，把原有的文件提取到App.vue文件中

1.安装vue-loader

     npm install vue-loader vue-template-compiler --save-dev

2.配置App.vue文件

<template>
    <div>
        <h2 class="title">{{message}}</h2>
        <button @click="btnClick">按钮</button>
        <h2>{{name}}</h2>
    </div>
</template>

<script>
    export default {
        name: "App",
        data(){
            return{
                message:"Hello Webpack",
                name:'Nickel'
            }
        },
        methods:{
            btnClick(){
                alert(1);
            }
        }
    }
</script>

<style scoped>
 .title{
     color: red;
 }
</style>

3.在main.js文件中引入App.vue文件

//1.使用common.js的模块化
const {add,mul}=require('./js/mainUtils')


console.log(add(20, 30));
console.log(mul(30, 50));

//2.使用es6的模块化
import {name,age,height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);

//3.依赖css文件
require("./css/normal.css");
//import css from './css/normal.css'
document.writeln('<h2>你好呀，Nickel！！</h2>')

//4.引入less文件
require("./css/special.less")

//5.映入vue
import  vue from 'vue'
//import  app from './vue/app'
import app from './vue/App.vue'

new vue({
    el:"#app",
    template: '<app/>',
    components:{
        app
    }
});

4.配置webpack.config.js，文件引入

const path =require('path');
module.exports={
	entry:'./src/main.js',
	output: {
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist'),
		publicPath:'dist/'
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [ 'style-loader','css-loader' ]
			},
			{
				test: /\.less$/,
				use: [
					{
						loader: 'style-loader',
					},
					{
						loader: 'css-loader',
					},
					{
						loader: 'less-loader',
						options: {
							lessOptions: {
								strictMath: true,
							},
						},
					},
				],
			},
			{
				test: /\.(png|jpg|gif)$/,
				use: [
					{
						loader: 'url-loader',
						options: {
							limit: 1890,
							name:'img/[name].[hash:8].[ext]',
						},

					}
				]
			},
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['es2015']
					}
				}
			},
			//对vue模拟进行配置
			{
				test:/\.vue$/,
				use:['vue-loader']
			}
		]
	},
	//vue模板无法正常编译的问题
	resolve: {
		alias: {
			'vue$':'vue/dist/vue.esm.js'
		}
	},
}

5.此时运行为会报以下的错误

在这里插入图片描述

6.修改package.json文件

在这里插入图片描述

7.重新编译package.json文件，执行命令：npm install

npm install

8.重新编译文件，执行命令：npm run build

npm run build

9.页面显示结果

在这里插入图片描述

四、在主组件里面添加子组件

1.创建子组件，名字叫Cpn.vue

<template>
   <div>
       <div>我是cpn主键的</div>
       <p>我是cpn组件的内容，哈哈哈</p>
       <h2>{{message}}</h2>
   </div>
</template>

<script>
    export default {
        name: "Cpn",
        data(){
            return {
                message:'cpn组件的内容'
            }
        }
    }
</script>
<style scoped>
</style>

2.在父主键中添加子组件Cpn.vue

<template>
    <div>
        <h2 class="title">{{message}}</h2>
        <button @click="btnClick">按钮</button>
        <h2>{{name}}</h2>
        <!--添加子组件-->
        <Cpn></Cpn>
    </div>
</template>

<script>
    //引入子组件
    import Cpn from './Cpn.vue'
    export default {
        name: "App",
        //注册子组件
        components: {Cpn},
        comments:{
            Cpn
        },
        data(){
            return{
                message:"Hello Webpack",
                name:'Nickel'
            }
        },
        methods:{
            btnClick(){
                alert(1);
            }
        }
    }
</script>
<style scoped>
 .title{
     color: red;
 }
</style>

3.效果展示

在这里插入图片描述

四、对文件相关的处理

4.1、添加版权说明

1.修改webpack.config.js配置文件
const webpack=require('webpack');

module.exports={
plugins: [
		new webpack.BannerPlugin('最终版权归Nickel所有')
	]
}
2.对修改后的文件进行重新打包，执行npm run build
npm run build
3.执行成功之后效果展示

在这里插入图片描述

4.2、把html文件导入打包文件夹中

1.安装插件，插件名为，npm install html-webpack-plugin --save-dev
npm install html-webpack-plugin --save-dev
2.修改package.json的html-webpack-plugin 版本，版本为^3.2.0

在这里插入图片描述

3修改配置文件
const htmlWebpackPlugin=require('html-webpack-plugin');

plugins: [
		new webpack.BannerPlugin('最终版权归Nickel所有'),
		new htmlWebpackPlugin({
			template:'index.html',
		})
	]

在这里插入图片描述

3.重新更新jar包文件，npm install
4.执行编译结果，npm run build

在这里插入图片描述

4.3、对js文件进行压缩，减少内存的使用量

1.安装插件，命令为npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
2.修改webpack.config.js配置文件
const unglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');

	plugins: [
		new webpack.BannerPlugin('最终版权归Nickel所有'),
		new htmlWebpackPlugin({
			template:'index.html',
		}),
		new unglifyjsWebpackPlugin(),
	]
3.运行npm run build 命令进行编译，运行结果为

在这里插入图片描述

4.4、搭建本地服务

1.安装插件，命令为npm install webpack-dev-server@2.9.1 --save-dev
npm install webpack-dev-server@2.9.1 --save-dev
2.修改webpack.config.js配置文件
devServer:{
		contentBase:'./dist',
		inline: true
	}
3 修改package.json里面增加本地服务器的开启
"dev": "webpack-dev-server"

在这里插入图片描述

4 增加浏览器的自动打开功能
"dev": "webpack-dev-server  --open"

在这里插入图片描述

4.5、配置文件的分离，开发配置文件褐测试的配置文件的分离

1.安装插件，命令为npm install webpack-merge --save-dev
npm install webpack-merge --save-dev
2.配置共同文件，文件名为base.config.js
const path =require('path');

const webpack=require('webpack');
const htmlWebpackPlugin=require('html-webpack-plugin');
const unglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');

module.exports={
    entry:'./src/main.js',
    output: {
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist'),
        //publicPath:'dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader','css-loader' ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                strictMath: true,
                            },
                        },
                    },
                ],
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1890,
                            name:'img/[name].[hash:8].[ext]',
                        },

                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            //对vue模拟进行配置
            {
                test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    //vue模板无法正常编译的问题
    resolve: {
        alias: {
            'vue$':'vue/dist/vue.esm.js'
        },
        extensions: ['.vue','.css','.js']
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归Nickel所有'),
        new htmlWebpackPlugin({
            template:'index.html',
        }),
    ],

}
3.配置生成是的js文件，文件名为prod.config.js
const unglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');
const  webpackMergin=require('webpack-merge');
const baseConfig=require('./base.config.js');

module.exports=webpackMergin.merge(baseConfig,{
    plugins: [
        new unglifyjsWebpackPlugin(),
    ],
});
4.配置测试时的js文件，文件名为dev.config.js
const  webpackMergin=require('webpack-merge');
const baseConfig=require('./base.config.js')

module.exports=webpackMergin.merge(baseConfig,{
    devServer:{
        contentBase:'./dist',
        inline: true
    }
})
5.修改package.json配置文件，指定开发和测试时的文件路径
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },

在这里插入图片描述

5.修改base.config.js文件，指定文件打包的路径

在这里插入图片描述

4.5、脚手架相关的知识

1.CUE CLI脚手架
1.概念

在这里插入图片描述

2.检查是否安装node

在这里插入图片描述

3.安装Vue脚手架cli3，命令为 npm install -g @vue/cli（console控制台进行输入）

在这里插入图片描述

4 脚手架安装成功，命令为vue --version

在这里插入图片描述

5 引用脚手架2模板的相关的知识
1.安装脚手架cli2的模板，命令为 npm install @vue/cli-init -g

在这里插入图片描述

2.脚手架2的初始化项目 vue init webpack 项目名

说明：在webpack终端里面执行以上的命令，创建cli
在这里插入图片描述
1.给项目取名字，保持默认就行了
在这里插入图片描述
2.项目描述
在这里插入图片描述
3.配置作者名字
在这里插入图片描述
4.选择打包方式
在这里插入图片描述
5.是否使用路由
在这里插入图片描述
6.是否规范js代码

在这里插入图片描述
7.是否使用单元测试
在这里插入图片描述
8.是否进行端到端测试
在这里插入图片描述
9.选择npm管理工具
在这里插入图片描述

nickel369
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的环境配置和软件安装
qq_44858980的博客
07-06 245
软件安装和环境配置 1.安装node.js 默认安装node.js，一路默认，可修改安装路径 安装完成打开cmd，输入node -v和npm -v 显示如上即为ok，其余为异常情况 2.配置node.js和npm环境变量 然后 首先在node.js的安装路径中新建两个文件夹，分别作为缓存文件夹和全局安装文件夹。node_global和node_cache 在管理员的cmd中输入以下指令，设置缓存和全局安装文件夹为上述新建文件夹。 请将D:\Program Files\nodejs替换为你自己的node.j
Vue相关软件的安装
ne_123456的博客
08-06 1846
但是我们之前的vue和我们的java代码是不是都在一个工程下。没有做到前后端完成分离。企业中前端也会由自己的服务器，也有自己的开发工具。前端服务器Nodejs 开发工具VsCode[我们为了和idea匹配使用WebStorm]................
Vue不同编译输出文件的区别
weixin_34205826的博客
08-13 922
Vue源码是选用了rollup作为bundler，看Vue的源码时发现：npm script对应了不同的构建选项。这也对应了最后打包构建后产出的不同的包。 不同于其他的library，Vue为什么要在最后的打包构建环节输出不同类型的包呢？接下来我们通过Vue的源码以及对应的构建配置中简单的去分析下。 由于Vue是基于rollup进行构建的...
Vue安装及环境配置、开发工具
xsq123的专栏
06-24 2935
Vue的安装及环境配置，新建vue项目，简单介绍vue开发工具和项目结构
VUE安装及建立项目
weixin_42141227的博客
04-28 94
安装 下载安装包及安装 Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。 安装过程无设置。 设置环境便令 NODE_PATH ：C:\Program Files\nodejs（安装目录） path中添加安装目录：C:\Program Files\nodejs 检查是否安装成功 cmd 中 node -v npm -v cnpm 淘宝镜像 npm install cnpm -g --registry=https://registry.
qt+qml+vue构建应用程序示例
05-14
同时，需要安装Vue.js及其开发工具。 2. **创建QML项目**：使用Qt Creator创建一个新的QML项目，配置好项目的结构，包括main.qml文件，这是QML应用的入口点。 3. **集成Vue**：在QML中，我们可以使用`QtQuick....
Vue多文件学习项目综合案例Demo，黑马vue教程
03-04
通过这个黑马Vue教程的综合案例Demo，你不仅能学习到Vue的基本概念，还能实践项目开发的全流程，包括组件设计、路由设置、状态管理、API交互以及项目构建。这对于提升你的Vue开发技能是非常有帮助的。在实际操作中，...
博客开源项目（java+vue）
12-24
下面将详细阐述Java和Vue.js在该项目中的应用以及相关知识点。 首先，Java作为后端开发的主要语言，其强大的类型检查和丰富的类库使得它在企业级应用开发中占据了主导地位。在这个博客系统中，Java可能使用了Spring...
awesome-github-vue, Vue相关开源项目库汇总.zip
09-17
"Awesome Github Vue" 是一个集合了众多Vue相关的开源项目库的资源列表，旨在帮助开发者找到高质量的Vue.js工具、框架、插件以及教程等。这个压缩包"awesome-github-vue.zip"包含了一个名为"awesome-github-vue-...
npm install 安装报错解决指南
NiNg_1_234的博客
08-22 1116
在处理npm安装报错时，首先检查Node.js和npm的版本是否匹配，然后清理缓存，检查权限设置，并考虑是否需要更新。通过这些步骤，大多数npm安装问题都可以得到解决。如果问题依旧存在，可以考虑使用替代方案或寻求社区帮助。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章npm install 报错问题解决合集解决npm install安装报错问题。
前端环境搭建:node.js、npm的下载和安装
weixin_51455837的博客
08-25 299
优先需要知道的是npm是node的包管理器 ，Node.js 的安装通常包括 npm（Node Package Manager，有些node版本没有npm，所以安装好了node，只需验证node和npm的版本即可，才能验证安装成功。点击你选择的版本旁边的 “Download” 按钮，根据你的操作系统选择合适的安装包进行下载。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许你在服务器端运行 JavaScript 代码。下载完成后，根据你的操作系统启动安装程序。
npm install报错解决问题
爱敲代码的卡拉米的博客
08-23 384
报错时，问题可能来源于多个方面，包括网络问题、依赖冲突、npm 版本不兼容、文件错误等。以下是一些解决。
npm阿里云制品仓库
愤怒的苹果ext的博客
08-23 210
【代码】npm阿里云制品仓库。前端仓库 verbose web login not supported, trying couch
linux centos安装nodejs和npm
llllllllllgyt的博客
08-21 124
1sudo yum install epel-release 后安装了一个仓库就可以了。
适合前端小白的-NPM包管理命令合集
zayyo的博客
08-21 428
NPM代表Node Package Manager（Node包管理器），它是一个用于管理和共享JavaScript代码模块的工具。JavaScript是一种在网页开发中广泛使用的编程语言，而NPM使开发人员能够更轻松地共享、重用和维护他们编写的代码。NPM最初是作为Node.js的软件包管理工具而创建的，用于管理Node.js应用程序的依赖关系和模块。随着时间的推移，NPM变得非常流行，并且逐渐成为广泛用于前端和后端JavaScript开发的工具。
pip package查询网站（性质类似于npmjs.com）
weixin_59685936的博客
08-22 322
pip package查询网站（性质类似于npmjs.com）
patch-package|npm补丁修复
qq_39517116的博客
08-25 436
2.手动去node_module 中修改（我要修改fastify的代码）4.加入 scripts 脚本，install 之后可以自动执行。可以用来修复依赖代码缺陷，或者按照自己需求做一点小东西。做小改动可以，大改动最好还是 fork 仓库发包。3.修改完成后，为 fastify 生成补丁。
Windows上安装 nodejs，npm 和 yarn详细教程
最新发布
qq_39964887的博客
08-26 122
下载需要版本版本，具体操作如下。如遇到其余问题，欢迎大家留言讨论。4、安装npm和yarn参考。具体安装可参考以下知乎教程。访问Node.js 官网。1、下载Node.js。2、安装Node.js。5、如果出现错误，参考。
Vue.js实战教程：构建48小时精通项目
- 第1章着重于Vue.js的入门介绍，包括框架简介、生产环境的配置方法（如Vue.js的引入和VueDevtools的安装），以及页面基本结构的构建，涉及`template`、`script`和`style`标记的使用。 - 重点内容（△）在于生产...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值