不使用脚手架搭建vue项目

找到一个需要搭建项目的空文件夹
在文件夹中执行命令npm init 生成package.json文件(此处将展示我们的依赖\编译配置等信息)
安装webpack 一vue及vue-loader使webpack能够加载vue文件,并编译为浏览器能够识别的js文件
npm i webpack vue vue-loader
上一步执行完后会提示我们npm WARN vue-loader@15.5.1 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.告诉我们需要安装css-loader,执行命令npm i css-loader
依赖采用–save-dev将存入DevDependencies中,意味着只用于开发环境.而dependencies则表示只用于生产环境

package.json
{"name": "vue_project","version": "1.0.0","description": "项目描述","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "作者名","license": "ISC"
}

基础的项目结构就差不多了.创建一个src文件夹以放置项目文件.src文件夹中添加一个vue入口文件及js工程入口文件.再在根目录创建一个webpack.config.js文件作为webpack配置文件
给app.vue和main.js添加一些基础代码

// main.js 工程入口文件
import Vue from 'vue'; // 引入vue
import App from './app.vue'; // 引入入口的vueconst root = document.createElement('div'); // 创建一个div
document.body.appendChild(root); // 将div添加在body元素中//mount 将App挂载到root根节点中
new Vue({render: (h) => h(App)
}).$mount(root)

// app.vue
<template><div id="app">{{text}}</div>
</template><script>
export default {data(){return{text:'111'}}
}
</script><style lang="scss" scoped>
#app{color: red;
}
</style>

项目基础结构就是这样了.我们知道浏览器无法直接识别执行我们的项目.现在需要配置webpack.config.js文件

// webpack.config.js
const path = require("path");//nodejs基本包，用来处理路径//__dirname表示文件相对于工程的路径,join拼接工程路径和文件路径,让代码可以找到对应的出入口文件
// 有join对应的方法resolve,会按照层级式的路径找到文件
module.exports ={entry: path.join(__dirname, 'src/index.js'), // 入口文件output: {filename: 'bundle.js', // 文件名path: path.join(__dirname, 'dist') // 出口文件夹}
}

此处我们在package.json文件中添加执行命令"build": "webpack --config webpack.config.js",当执行npm run build命令时,让webpack执行webpack.config.js文件
执行此命令时,如果有webpack4环境的朋友需要安装webpack-cli,是环境要求,并非需要使用脚手架来搭建.直接yes就好
因为webpack只支持js类型的文件,我们就需要使用一些工具，在webpack.config.js里添加module配置项.直接在代码块中备注了
因为代码中用到了css,我们预先安装npm i style-loader,并在module中的rules下添加.css文件处理规则

const path = require("path"); // nodejs基本包，用来处理路径
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // 引入Plugin//__dirname表示文件相对于工程的路径,join拼接工程路径和文件路径,让代码可以找到对应的出入口文件
// 有join对应的方法resolve,会按照层级式的路径找到文件
module.exports = {entry: path.join(__dirname, 'src/main.js'), // 入口文件output: { // 出口文件配置filename: 'bundle.js', // 出口文件命名// 文件夹名称 join:仅可拼接多个字符串路径 resolve:可将多个路径解析为规范化的绝对路径,上下级目录等path: path.join(__dirname, 'dist')},// Vue-loader在15.*之后的版本需要配合VueLoaderPlugin使用,在plugins属性中添加如下配置plugins:[new VueLoaderPlugin()],mode:'none',module: {rules: [{ // 识别以vue结尾的文件test: /.vue$/, // 正则匹配loader: 'vue-loader'},{//识别以css结尾的文件test: /.css$/, // 正则匹配//css用use来声明use: ['style-loader',//处理内联样式。'css-loader']}]}
}

执行 npm run build可以看到成功生成了dist文件夹,里面有输出文件夹dist,打开bundle.js

方法来源于网络,各方借鉴学习,博主已实测 本文原创记录学习,侵权联系删除

不使用脚手架搭建vue项目相关推荐

MAC电脑使用vue-cli脚手架搭建vue项目；mac使用脚手架vue-cli搭建vue项目
windows搭建vue项目看这篇
vue基础，加少量的webpack，以及脚手架搭建vue项目
这是我学习vue基础时候的笔记,在b站上跟着敲的,一开始是有道云笔记的形式,为了上传到博客整理了两个小时改成了markdown的形式,喜欢的点个赞,谢谢. 文章目录一. vue基本使用 1. 实例参 ...
vue cli脚手架详解_vue-cli脚手架搭建vue项目搭建
在搭建项目前,需要确认系统是否已正确安装nodejs工具,建议node安装6.+以上的稳定版本,若这个最基本的配置已经完成了,就可以开始搭建项目了 1 进入到你想要创建项目的目录下,全局安装vue-c ...
使用node.js 脚手架搭建Vue项目
1.安装node.js https://nodejs.org/zh-cn/ 下载安装node.js在命令行测试 node -v 输出版本号说明安装成功 2.使用npm更新安装cpnm npm inst ...
webpack搭建vue项目（不用脚手架）
webpack搭建vue项目(不用脚手架) npm默认安装的是最新版本,这里讲的是Webpack4用法,如果遇到问题请检查是否是版本问题 webpack5升级了一些东西,例如图片的打包 1.初始化项目 ...
搭建vue项目脚手架_逆战班出品
搭建vue项目脚手架 1. 安装执行以下命令(npm) npm install @vue/cli -g//全局安装创建目录 vue create 目录文件名进入目录 cd 目录文件名启动项目 ...
Vue-CLI + Webpack 搭建 Vue 项目最全分析
一.vue-cli介绍 vue-cli是一个用于快速搭建vue项目的脚手架. 二.vue-cli安装.更新安装过nodeJs .cnpm 后,全局安装vue-cli(以后其他项目可直接使用): c ...
使用vue-cli脚手架初始化Vue项目下的项目结构
vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于 ...
搭建vue项目环境以及创建一个简单的vue的demo
一.vue-cli脚手架的搭建步骤 1.首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,则需要安装node.js 这个很简单默认点击安装 ...
关于搭建Vue项目的顺序及遇到的问题
关于搭建Vue项目的顺序前言:笔者在搭建Vue项目中遇到了许多问题,当最后解决的时候,仍然对这个过程的来龙去脉极为模糊,在这里从最开始搭建nodejs开始到最后Vue项目搭建完成进行一个一条龙的总结 ...

不使用脚手架搭建vue项目

不使用脚手架搭建vue项目

不使用脚手架搭建vue项目相关推荐

最新文章

热门文章