webpack+vue2构建vue项目骨架的方法
前端项目打包工具webpack与前端开发框架vue，算是现在前后端分离后非常流行的技术了，今天主要讲的是使用webpack和vue2构建一个前后端分离项目的基本骨架。虽然使用vue-cli脚手架可以帮我们搭建好一个项目骨架，但是了解原理我觉得还是很重要的，所以这篇文章主要就写webpack与vue构建一个基础项目。前提是已经安装了nodejs。
整个项目需要通过npm安装的依赖
css ： style-loader、css-loader、sass-loader、node-sass
js：babel-core 、babel-loader、babel-preset-es2015
webpack：webpack、webpack-dev-server
vue：vuer 、vue-loade、vue-html-loader、vue-template-compiler
新建一个项目的目录
我们首先需要新建一个目录myApp用来放我们的项目，在终端里面进入这个项目，然后开始初始化项目。
初始化项目
$ npm init
初始化项目的时候，如果没有特别需要，直接按“回车键”就可以。项目初始化完成后，就会生成一个packge.json文件主要存放项目依赖目录和配置项目启动命令。
安装依赖
$ npm i style-loader --D
使用npm安装依赖的时候，我们会在最后加上“--D”，因为加“--D”后会在packge.json里面留上记录。如果我们将项目在其他系统打开时，会发现开发的时候通过npm安装的依赖不能用了，这是因为存在系统兼容性。而如果开发项目的时候安装依赖加上“--D”，项目里面的node_modules就不需要拷贝过去，而打开项目前，我们只需要通过npm安装所有依赖就可以了。
$ npm i
配置webpack.config.js文件
webpack所有的配置都在webpack.config.js文件里面，所以初始化项目后，我们需要新建一个webpack.config.js文件然后配置。由于上次已经专门写过webpack的基本配置，这儿就不重复了，直接贴上我的配置代码：
module.exports = {
entry: './src/main.js',
output:{
path: __dirname + '/dist/',
filename: 'bundle.js'
},
devtool:'source-map',
devServer:{
// 主要改变项目的根目录
contentBase: __dirname + '/dist/',
port:8080,
inline:true
},
module:{
loaders:[
{test:/\.css$/,loader :'style-loader!css-loader'},
{test:/\.js$/, loader:'babel-loader',exclude:/node_modules/},
{ test: /\.vue$/, loader: 'vue-loader' }
]
},
//vue文件想要解析必须要要加上这句才能成功
resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
}
配置package.json
package.json里面需要配置的主要时项目启动命令，一个开发模式的start和打包项目build。
启动项目
$ npm start
打包项目
$ npm run build
整个项目的目录
src：我们开发的源文件都放在这个目录里面
components：用来放所有的组件
styles：存放所有的样式文件
utils：存放所有需要自己写的方法函数
app.vue：所有的vue文件的入口文件
main.js：整个项目的js入口文件
index.html：这个文件可以放在真个项目的根目录myApp里面，也可以放在webpack打包的生成的目录dist里面，如果是放在根目录则webpack.config.js里面的contentBase: __dirname ，如果在dist里面则contentBase: __dirname + '/dist/'。主要改变项目的服务根目录的位置，就是我们localhos:8080打开时浏览器显示的目录。（经过测试放在打包生成的dist目录会好些，主要在开发模式可以实现实时更新。这个可能不太准，后期再测试后进行修改）
index.html文件代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>webpack+vue</title> </head> <body> <div id="app"></div> <script src="./bundle.js"></script> </body> </html>
main.js文件代码
//引入vue框架<br>
//import是es6的写法，其实和var Vue = require('vue')是相同的意义<br>import Vue from 'vue';<br>
//引入App.vue文件，这个文件也是vue所有组件的入口，我们的项目就是将这个文件追加到index.html文件里面
import App from './App.vue';
new Vue({
el:'#app',
components: {App},<br>//主要目点就是将App追加到“#app”里面去
render: h => h(App)
})
App.vue文件代码
<template>
<div>Hello VueJS!</div>
</template>
<script>
export default{
name:"app"
}
</script>
到这儿整个项目基本上就完成了基本的结构，在浏览器输入：localhost:8080，就可以看到显示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- vue2.x+webpack快速搭建前端项目框架详解
相关推荐
-
vue2.x+webpack快速搭建前端项目框架详解
一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是具体实操. 二.基本命令操作. 1.在开发之前需要首先安装node.js,直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/ 在装完node之后npm包管理工具也自动的安装好,安装完之后,在命令行输入node -v或者npm -v,出现版本号说明安装成功.如下
-
webpack+vue2构建vue项目骨架的方法
前端项目打包工具webpack与前端开发框架vue,算是现在前后端分离后非常流行的技术了,今天主要讲的是使用webpack和vue2构建一个前后端分离项目的基本骨架.虽然使用vue-cli脚手架可以帮我们搭建好一个项目骨架,但是了解原理我觉得还是很重要的,所以这篇文章主要就写webpack与vue构建一个基础项目.前提是已经安装了nodejs. 整个项目需要通过npm安装的依赖 css : style-loader.css-loader.sass-loader.node-sass js:babe
-
带你使用webpack快速构建web项目的方法
使用webpack构建web项目以及热部署插件的使用,按以下步骤,能帮助你快速构建和理解~ 详细学习还得靠官方文档! 一,基础构建部分 大前提!你得先安装了Node.js此处不赘述. 1,创建一个文件夹 2,在当前文件夹子下打开命令行工具 3,项目初始化(创建package.json文件) npm init -y 4,安装依赖 版本搭配如下: "devDependencies": { "webpack": "^4.17.1", "web
-
通过命令行生成vue项目框架的方法
本文介绍了通过命令行生成vue项目框架的方法,现在分享给大家 -- 安装nodejs 用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的, 所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识: nodejs安装: http://www.jb51.net/article/113457.htm npm 介绍: http://www.jb51.net/article/87893.htm -- 安装命令行工具 npm inst
-
vue-cli构建vue项目的步骤详解
构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli .前端的三大框架都有自己的脚手架工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置 webpack 配置文件的基本内容,大大降低了初学者构建项目的难度.这节我们看看如何使用 vue-cli 构建 vue 项目以及对构建项目的具体分析. 一.环境搭建 node 和 npm 是必不可少的,这里不再介绍. 1.安装 vue-cli $ npm install -g vue-cli 检查是否安装成功: $ vue -
-
Vs-code/WebStorm中构建Vue项目的实现步骤
目录 一.使用Vue脚手架(vue-cli)构建Vue项目 二.使用Vite构建工具构建Vue项目 三.WebStorm中创建Vue项目(使用Vite构建工具) 一.使用Vue脚手架(vue-cli)构建Vue项目 1.打开cmd安装或升级Vue脚手架 npm install -g @vue/cli 2.进入工作目录创建Vue项目 vue create 项目名称 3.进入项目目录,启动项目 npm run serve 4.项目目录用处: 4.1.public目录:静态资源文件夹.index.ht
-
详解如何提高 webpack 构建 Vue 项目的速度
前言 最近有人给我的 Vue2 后台管理系统解决方案提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了.在项目中,引入了比较多的第三方库,导致项目大,而每次修改,都不会去修改到这些库,构建却都要再打包这些库,浪费了不少时间.所以,把这些不常变动的第三方库都提取出来,下次 build 的时候不再构建这些库,这样既可大大缩短构建时间.那么要怎么去实现呢? 解决方案 DllPlugin 和 DllReferencePlugin 查找了一下资料,发现我们可
-
webpack构建vue项目的详细教程（配置篇）
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入
-
浅谈Vue项目骨架屏注入实践
相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带来了一些弊端,比如首屏渲染时间(FCP)因为首屏需要请求更多内容,比原来多了更多HTTP的往返时间(RTT),这造成了白屏,如果白屏时间过长,用户体验会大打折扣,如果用户网速差,则FCP会更长. 由此引申出一系列的优化方法,骨架屏也因此被提出. 1. FCP优化 在 Google 提出的以用户为中心
-
vue-cli如何快速构建vue项目
vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 1.安装vue-cli 使用npm全局安装vue-cli(前提是已经安装了nodejs,否则连npm都用不了) $ npm install -g vue-cli 2.创建自己的工作空间 $ vue init webpack vuetest 3.项目信息 命令输入后,会进入安装阶段,需要用户输入一些信息 Project name (vuetest) 项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字
-
浅谈 Vue 项目优化的方法
好久不写博文了,本文作为我使用半年 vue 框架的经验小结,随便谈谈,且本文只适用于 vue-cli 初始化的项目或依赖于 webpack 打包的项目. 前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style&