不用@Vue/cli，使用npm+webpack+vue手动创建Vue项目（Vue 2.0）

最新推荐文章于 2024-01-08 23:01:02 发布

茹大帅呀

最新推荐文章于 2024-01-08 23:01:02 发布

阅读量430

点赞数

文章标签： vue.js webpack

本文链接：https://blog.csdn.net/qq_34142336/article/details/118145348

版权

1、新建一个项目目录，cnpm init 初始化，根据提示填写内容；

cnpm init
cnpm init -y		//不想它问问题，可以用这个默认安装

-y：全都yes，让npm不要提示并自动完成初始化【传送门：npm config】

2、安装webpack和webpack-cli

cnpm install webpack webpack-cli -D

package.json配置文件的**devDependencies和dependencies**：
只在开发过程中用到的包放在devDependencies，生产环境还要用的包放在dependencies。哼，要你说，看名称我就知道[翻白眼]

devDependencies：

webpack相关的打包工具；
webpack相关的插件；
babel语法转换编译器；
各种loader（vue-loader、vue-style-loader、style-loader、css-loader…）；
vue-template-compiler编译器；

"devDependencies": {
     "webpack": "^5.39.1",
     "webpack-cli": "^4.7.2",
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.14.5",
     "babel-loader": "^8.2.2",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.1",
     "style-loader": "^2.0.0",
     "vue-loader": "^15.9.7",
     "vue-template-compiler": "^2.6.14",
     "css-loader": "^5.2.6"
}

dependencies

vue;
Vuex;
Vue-Router;
axios;
ECharts;
jquery;
…

"dependencies": {
     "vue": "^2.6.14"
 }

3、安装Vue

cnpm install vue --save

4、在项目目录下（package.json同级）创建`src`文件夹，src文件夹下创建App.vue和index.js两个文件；根目录下创建index.html文件；

先安装vue，idea就能够识别这个项目是Vue项目，在用idea创建文件的时候可以直接选择Vue Component

目前的项目结构如下：
项目目录

5、index.js添加以下内容

import Vue from "vue"			//导入vue
import App from "./App.vue"		//导入App.vue文件
new Vue({						//创建Vue对象（实例），挂载到id为app的HTML节点上（会替换 #app）
    render:h=>h(App)
}).$mount("#app")

6、App.vue添加以下内容

<template>
    <div id="app">
        <h2 id="title">{{title}}</h2>
    </div>
</template>

<script>
    export default {
        name : "App",
        data(){
            return{
                title:"不用@Vue/cli，使用npm+webpack+vue手动创建Vue项目（Vue 2.0）"
            }
        }
    }
</script>

<style scoped>
    #title{text-align:center}
</style>

7、index.html添加以下内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

8、安装vue-loader和vue-template-compiler，一定要同时安装。

有了这两个就可以处理.vue文件了。

vue-loader：一个webpack的加载器，它允许你以一种称为单文件组件(SFCs)的格式编写Vue组件；
vue-template-compiler：Vue 2.0模板预编译器；

官网解释：
你应该将 vue-loader 和 vue-template-compiler 一起安装。每个 vue 包的新版本发布时，一个相应版本的 vue-template-compiler 也会随之发布。编译器的版本必须和基本的 vue 包保持同步，这样 vue-loader 就会生成兼容运行时的代码。这意味着你每次升级项目中的 vue 包时，也应该匹配升级 vue-template-compiler。

cnpm install vue-loader vue-template-compiler -D

有警告提示：
在这里插入图片描述
那就继续安装css-loader，顺便把style-loader也一起安装了

cnpm install css-loader style-loader -D

【传送门：“vue-style-loader” 跟 “style-loader” 区别】

截止现在，已经有了webpack打包器、vue、vue加载编译器、css/style加载器，还缺JavaScript和HTML的处理器，下面就安装这两个处理器

9、安装babel-loader、@babel/core、@babel/preset-env

cnpm install babel-loader @babel/core @babel/preset-env -D

这个包允许使用Babel和webpack编译JavaScript文件，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。【传送门】。

10、安装html-webpack-plugin

cnpm install html-webpack-plugin -D

作用：生成一个HTML文件

11、根目录新建webpack.config.js文件并写入一些内容

const path = require('path');  //引入Node.js的path模块  //nodejs文档：http://nodejs.cn/api/path.html
const webpack=require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，还要在 webpack 配置中添加 Vue Loader 的插件
const HtmlWebpackPlugin =require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist',
        //path: path.join(__dirname, 'dist')          // path.join(path1，path2，path3.......)将路径片段使用特定的分隔符\连接起来形成路径。
        //path.resolve(__dirname,'./dist');       //把一个路径或路径片段的序列解析为一个绝对路径，斜杠/被解析为根目录。
    },
    mode: 'development',    //production
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),  //Vue Loader和其他loader不一样，要配置插件
        new HtmlWebpackPlugin({
            filename:'index.html',
            template: 'index.html'
        })
    ]
};

12、最后在package.js的“scripts”里面添加一句

"build": "webpack --config webpack.config.js"

至此，项目常见完成，再根据需要添加一些其他功能或者插件，比如webpack-dev-server。

13[扩展]、安装webpack-dev-server

cnpm install webpack-dev-server -D

webpack.config.js里面添加devServer的配置，顺便启用热更新：

module.exports = {
    //......
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9000,
        hot: true,
        open:true
    }
}

package.json的“scripts”里面添加：

 "dev": "webpack-dev-server --inline --progress --config webpack.config.js"

运行：cnpm run dev，此时就跟@vue/cli创建的项目差不多了

cnpm run dev

如果遇见这种错误：Error: Cannot find module 'webpack-cli/bin/config-yargs'，降低一下webpack-cli的版本试试。

14、最终项目结构和配置：

在这里插入图片描述

茹大帅呀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
不用@Vue/cli，使用npm+webpack+vue手动创建Vue项目（Vue 2.0）

1、新建一个项目目录，npm/cnpm init初始化，根据提示填写内容；cnpm initcnpm init -y-y：让npm不要提示并自动完成初始化【传送门：npm config】2、安装webpack和webpack-clicnpm install webpack webpack-cli -Dpackage.json配置文件的**devDependencies和dependencies**：只在开发过程中用到的包放在devDependencies，生产环境还要用的包放在depend
复制链接

扫一扫