Re：从零开始的Vue项目搭建

  • 初始的终结与结束的开始
  • Nodejs项目的简单测试
  • 从零开始
    • webpack开发模式
    • webpack编译打包
  • 后记

初始的终结与结束的开始

最开始接触vue项目搭建是从vue-cli开始，模板式操作，一键搞定，几乎可以无缝进入代码开发阶段，这对新人来说很友好，马上就能够一边看教程，一边测试代码，我当初就是这么学vue的（顺便提一下，我在学习vue之前没接触过任何前端框架，连Nodejs都没接触过，以前做前端的时候只会html+css/sass+js这种形式），但是这对新人也不好，因为模板搭建的东西往往很全面，全面就意味着东西很多，至于项目是怎么运行的，那些模板生成的文件都代表什么意思，在项目中起到什么作用，等等等，对新人来说一时半会儿很难搞清除，尤其是像我这总没接触过nodejs的人来说更甚。

所以在学习了一段时间的vue之后，我决定回到最初，开始学习如何从零搭建vue项目。

在搭建vue项目之前先了解一下Nodejs项目，因为vue项目其实就是Nodejs项目，了解Nodejs项目不仅有利于学习了解vue项目，并且更具有扩展性和通用性。

一个Nodejs项目的创建过程，大致分为 1.创建项目目录，2.初始化项目，3.安装依赖模块，4.进入开发过程

mkdir myproject   # 创建项目目录
cd myproject      # 进入项目目录
npm init          # 初始化项目

接下来会引导你创建一个名为package.json的文件，它是Nodejs项目所必须的，里面记录了项目名称，版本，描述，关键词，作者，脚本命令，生产环境，开发环境等等。关于package.json的完整字段信息可以百度。

输入代码开始安装模块
npm install <package>仅安装模块，
npm install <package> --save安装模块并在生产环境dependencies中记录包名和版本，
npm install <package> --save-dev安装模块并在开发环境devDependencies中记录包名和版本。

这就好比，刚刚初始化Nodejs项目相当于干细胞，根据安装的模块和依赖不同，就会成为不同的项目。好，接下来，我们就在这个基础Nodejs项目上去搭建vue项目

Nodejs项目的简单测试

这里先测试一下如何在Node中渲染html，熟悉Node的同学可以跳过。在项目目录下添加一个入口文件index.html，我们的vue项目需要在html中进行渲染，然后在index.html中随便写的东西，方便我们看到效果，比如<h1>hello world</h1>?

|-- build
|   |-- run.js
|-- node_modlues
|   |-- ...
|-- index.html
|-- package.json

在package.json的scripts字段中添加npm的命令缩写，node ./build/run.js，这是一条node语句，表示使用 node 运行run.js

"scripts": {"start": "node ./build/run.js"},

./build/run.js内容

var express = require('express')
var path = require('path')
var app = express()app.get('/', function (request, response) {var root = path.resolve('.')response.sendFile( root + '/index.html')
})var server = app.listen(8080, '127.0.0.1', function () {var host = server.address().addressvar port = server.address().portconsole.log("Server running at http://%s:%s", host, port)
})

我们用到了express模块，这是一个很基础，但也很重要的Nodejs框架，先安装npm insall express --save-dev

接下来我们使用命令npm run start运行程序，控制台会显示如下信息

D:\wwwroot\myproject>npm run start> myproject@1.0.0 start D:\wwwroot\myproject
> node ./build/run.jsServer running at http://127.0.0.1:8080

是不是感觉和vue-cli搭建的模板工程很像，然后我们去浏览器输入http://127.0.0.1:8080就能看到我们在index.html中写的内容了，更改内容，然后刷新页面再看看效果。

从零开始

（从零开始的意义：大家可以放弃之前 Nodejs项目的测试 所做的更改，重新初始化一个项目，不用安装任何模块，一切从这里开始）

Nodejs项目的运行大致如上，但和我们的目标还相去甚远，要搭建vue项目，首先得配置开发环境（即安装模块）。

首先是安装 vue 和 webpack 模块，vue是我们项目的核心，这个没啥说的。webpack是JavaScript的打包模块，它将浏览器不能直接运行的语言打包处理成适合的格式以供浏览器使用。因为vue是发布所需要的，所以使用以下命令

npm install vue --save
npm install webpack --save-dev

但是光有这两个模块是不够的，

  • webpack 4.x 之后将 cli 单独拎了出来，所以还需要webpack-cli模块，
  • 在vue项目中，我们使用了.vue单文件形式，要加载这些单文件我们需要vue-loader模块，
  • 为了转化ES6高级语法，所以需要 babel-loader @babel/core @babel/preset-env 模块
  • 需要加载css，需要 css-loader模块，（如果要使用sass，那么还需要node-sass 和 sass-loader）
  • 需要引用图片或者其他资源文件，则需要 url-loader 或 file-loader
  • 每次更新代码后，我们都需要重新编译以便查看效果，这样会很麻烦，使用webpack提供的开发工具webpack-dev-server可以帮助我们在代码发生变化后自动编译代码
  • 最后我们还需要渲染html的插件html-webpack-plugin

综上，我们还需要安装如下模块

npm install vue-loader --save-dev
npm install webpack-cli webpack-dev-server --save-dev
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install css-loader --save-dev
npm install url-loader --save-dev
npm install html-webpack-plugin --save-dev

webpack开发模式

安装好模块后，回顾Nodejs项目，我们现在需要添加npm命令缩写，webpack配置文件

在package.json的scripts字段中添加npm的命令，（使用webpack-dev-server运行）

"scripts": {"dev": "webpack-dev-server --inline --progress --config webpack.config.js"},

在项目目录下新建webpack配置文件webpack.config.js，配置文件代码

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {// 配置 webopack 的入口 / 出口文件entry: {app: './src/main.js'},output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')},// 配置 webpack 的服务器信息devServer: {// 默认配置为http://localhost:8080},// 定义 webpack 的模式mode: 'development',// 配置 loader 载入规则module: {rules: [{test: /\.vue$/,loader: 'vue-loader'},{test: /\.js$/,loader: 'babel-loader'},{test: /\.css$/,use: ['vue-style-loader','css-loader']},{test: /\.(jpg|png|bmp)$/,use : 'url-loader'}]},// 添加解析文件后缀，添加后在引入文件时可以省略后缀只写文件名resolve: {extensions: ['*', '.js', '.vue', '.json']},// 配置插件项plugins: [// vue-loader 15.x 之后，必须引入这个插件才能正常工作new VueLoaderPlugin(),// 用来指定渲染的模板文件new HtmlWebpackPlugin({template: './index.html'})]
}

配置好webpack后我们需要添加其他文件内容，项目结构如下

|-- node_modlues
|   |-- ...
|-- src
|   |-- App.vue
|   |-- main.js
|-- index.html
|-- package.json
|-- webpack.config.js

./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>Vue</title>
</head>
<body><div id="app"></div>
</body>
</html>

./src/main.js内容

import Vue from 'vue'
import App from './App'new Vue({el: '#app',render: h => h(App)
})

./src/App.vue内容

<template><div id="app">Vue App</div>
</template><script>
export default {name: "App"
}
</script><style>
#app{color: gray;
}
</style>

输入命令npm run dev运行程序，就可以看到效果啦~~~，然后修改代码测试一下vue，看看效果

webpack编译打包

到这一步其实就相对容易了，webpack本身就是用于编译打包，webpack的配置文件也写好了，只需要使用webpack打包即可

添加build命令，然后使用npm run build命令编译打包

"scripts": {"dev": "webpack-dev-server --inline --progress --config webpack.config.js","build": "webpack --config webpack.config.js"},

打包完成后，会在项目目录下生成/dist文件夹，所有编译好的文件都在该目录下

后记

写到这里，一个基础的简单的vue项目其实就已经搭建好了，整个过程与其说是 如何从零搭建Vue项目 ，不如说是 如何使用webpack搭建项目 ，所以在今后的学习中不妨分成两个板块去学习

  • 使用 webpack 进行项目搭建，了解 webpack 的配置与命令，推荐阅读 webpack 官方中文文档
  • 如何配置 vue-loader ，推荐阅读 Vue Loader 官方中文文档

了解熟悉 webpack 可以让我们快速搭建前端框架项目或是自定义项目

Re：从零开始的Vue项目搭建相关推荐

  1. node安装与环境搭建 + VUE项目搭建

    一.node环境安装 1.node下载 node.js官网地址:Node.js LTS:表示稳定版  一般用于生产环境,重点在于稳定,如果你需要稳定性并拥有复杂的生产环境(例如中型或大型企业),建议使 ...

  2. Vue 项目搭建流程和使用大全

    Vue 项目搭建流程及项目中遇到的问题 项目搭建流程 1.使用vue cli 搭建项目框架 cnpm install -g vue-cli 安装vue cli 脚手架 vue init webpack ...

  3. vue项目搭建详细教程

    1.下载node.js 下载地址:Download | Node.js 直接下一步下一步即可下载完成 下载完成后,按住win+R,输入cmd回车 查看node版本:node -v 查看npm 版本:n ...

  4. 从零开始的VUE项目–01（前期准备和前台vue搭建）

    前端:VUE (2.9.6) (编码工具:Visual Studio Code) 后台:ASP.NET Web API (编码工具:Visual Studio 2019) 数据库:MYSQL (可视化 ...

  5. Vue项目搭建（从零开始）

    前言:笔者于明年六七月份毕业,现在正在准备毕设,该文章就是准备毕设项目的前端心路 在开始文章之前首先说明本人的前端水平,大概就是 写过一些原生的前端表格,了解vue,对它的一些组件和功能听说过,基本属 ...

  6. vue cli脚手架详解_vue-cli脚手架搭建vue项目搭建

    在搭建项目前,需要确认系统是否已正确安装nodejs工具,建议node安装6.+以上的稳定版本,若这个最基本的配置已经完成了,就可以开始搭建项目了 1 进入到你想要创建项目的目录下,全局安装vue-c ...

  7. vue项目搭建和配置

    第一步:创建项目 vue create bigscreen 第二步:进行项目的的配置,在vue.config.js配置文件中配置 module.exports = {outputDir: proces ...

  8. vue项目搭建以及环境配置

    一.环境要求:node 1. 下载链接:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功(node-v) 3.配置镜像 : npm i ...

  9. VUE项目搭建的整个过程

    一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:ht ...

最新文章

  1. JavaScript String 对象扩展方法
  2. 氨氮吹脱法脱与php有关系吗,吹脱法处理氨氮废水的原理及优缺点分析
  3. Detail when click Custom fields tile in s4
  4. linux强制用户改密码,如何在Linux中强制用户在下次登录时更改密码？
  5. .h .dll .lib
  6. 太实用了，4款常用的可视化大屏工具，你一定要知道！
  7. C++ 继承与组合的区别
  8. php分页代码简单实现原理,php分页类之PHP分页原理+代码实现
  9. jq移除一条html语句,jquery html()删除脚本标签
  10. 【解决方法】magento paypal快速结账 不跳转
  11. 从零开始学WEB前端——网页的骨架——HTML理论讲解
  12. Android编译中m、mm、mmm的区别
  13. 2012年第一批中关村高端领军人才公示公告
  14. EWM-Background and History
  15. 手把手教你拿到小世界里妹子的 QQ 号 ！
  16. 【Jetson Nano】使用python3模拟向阿里云发送数据
  17. 奇数点偶数点fft的matlab,电子科大 数字信号处理实验2_FFT的实现
  18. NTT笔记和多项式全家桶
  19. 在线翻译html网页,HTML网页到维基页面翻译器
  20. 8.前端JavaScript之数据类型

热门文章

  1. 用多媒体库 Bass.dll 播放 mp3 [8] - 实时显示左右声道的峰值
  2. 演示： 动态NAT完成网络地址翻译
  3. C# 文件操作详解（一）---------File类
  4. 一条nginx命令引发的对于容器的思考
  5. 一行代码完成定时任务调度,基于Quartz的UI可视化操作组件 GZY.Quartz.MUI
  6. Win11代言人官宣
  7. 鹅厂二面，Nginx回忆录
  8. 你知道这个C#开发跨平台APP的样例介绍开源项目吗？
  9. 跟我一起学.NetCore之EF Core 实战入门，一看就会
  10. 送福利 | 送书5本《ASP.NET Core项目开发实战入门》带你走进ASP.NET Core开发