Re：從零開始的Vue項(xiàng)目搭建

• 初始的終結(jié)與結(jié)束的開始
• Nodejs項(xiàng)目的簡單測試
• 從零開始
• • webpack開發(fā)模式
  • webpack編譯打包
• 后記

初始的終結(jié)與結(jié)束的開始

最開始接觸vue項(xiàng)目搭建是從vue-cli開始，模板式操作，一鍵搞定，幾乎可以無縫進(jìn)入代碼開發(fā)階段，這對新人來說很友好，馬上就能夠一邊看教程，一邊測試代碼，我當(dāng)初就是這么學(xué)vue的（順便提一下，我在學(xué)習(xí)vue之前沒接觸過任何前端框架，連Nodejs都沒接觸過，以前做前端的時(shí)候只會(huì)html+css/sass+js這種形式），但是這對新人也不好，因?yàn)槟０宕罱ǖ臇|西往往很全面，全面就意味著東西很多，至于項(xiàng)目是怎么運(yùn)行的，那些模板生成的文件都代表什么意思，在項(xiàng)目中起到什么作用，等等等，對新人來說一時(shí)半會(huì)兒很難搞清除，尤其是像我這總沒接觸過nodejs的人來說更甚。

所以在學(xué)習(xí)了一段時(shí)間的vue之后，我決定回到最初，開始學(xué)習(xí)如何從零搭建vue項(xiàng)目。

在搭建vue項(xiàng)目之前先了解一下Nodejs項(xiàng)目，因?yàn)関ue項(xiàng)目其實(shí)就是Nodejs項(xiàng)目，了解Nodejs項(xiàng)目不僅有利于學(xué)習(xí)了解vue項(xiàng)目，并且更具有擴(kuò)展性和通用性。

一個(gè)Nodejs項(xiàng)目的創(chuàng)建過程，大致分為 1.創(chuàng)建項(xiàng)目目錄，2.初始化項(xiàng)目，3.安裝依賴模塊，4.進(jìn)入開發(fā)過程

mkdir myproject # 創(chuàng)建項(xiàng)目目錄 cd myproject # 進(jìn)入項(xiàng)目目錄 npm init # 初始化項(xiàng)目

接下來會(huì)引導(dǎo)你創(chuàng)建一個(gè)名為package.json的文件，它是Nodejs項(xiàng)目所必須的，里面記錄了項(xiàng)目名稱，版本，描述，關(guān)鍵詞，作者，腳本命令，生產(chǎn)環(huán)境，開發(fā)環(huán)境等等。關(guān)于package.json的完整字段信息可以百度。

輸入代碼開始安裝模塊
npm install <package>僅安裝模塊，
npm install <package> --save安裝模塊并在生產(chǎn)環(huán)境dependencies中記錄包名和版本，
npm install <package> --save-dev安裝模塊并在開發(fā)環(huán)境devDependencies中記錄包名和版本。

這就好比，剛剛初始化Nodejs項(xiàng)目相當(dāng)于干細(xì)胞，根據(jù)安裝的模塊和依賴不同，就會(huì)成為不同的項(xiàng)目。好，接下來，我們就在這個(gè)基礎(chǔ)Nodejs項(xiàng)目上去搭建vue項(xiàng)目

Nodejs項(xiàng)目的簡單測試

這里先測試一下如何在Node中渲染html，熟悉Node的同學(xué)可以跳過。在項(xiàng)目目錄下添加一個(gè)入口文件index.html，我們的vue項(xiàng)目需要在html中進(jìn)行渲染，然后在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 運(yùn)行run.js

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

./build/run.js內(nèi)容

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模塊，這是一個(gè)很基礎(chǔ)，但也很重要的Nodejs框架，先安裝npm insall express --save-dev

接下來我們使用命令npm run start運(yùn)行程序，控制臺(tái)會(huì)顯示如下信息

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搭建的模板工程很像，然后我們?nèi)g覽器輸入http://127.0.0.1:8080就能看到我們在index.html中寫的內(nèi)容了，更改內(nèi)容，然后刷新頁面再看看效果。

從零開始

（從零開始的意義：大家可以放棄之前 Nodejs項(xiàng)目的測試 所做的更改，重新初始化一個(gè)項(xiàng)目，不用安裝任何模塊，一切從這里開始）

Nodejs項(xiàng)目的運(yùn)行大致如上，但和我們的目標(biāo)還相去甚遠(yuǎn)，要搭建vue項(xiàng)目，首先得配置開發(fā)環(huán)境（即安裝模塊）。

首先是安裝 vue 和 webpack 模塊，vue是我們項(xiàng)目的核心，這個(gè)沒啥說的。webpack是JavaScript的打包模塊，它將瀏覽器不能直接運(yùn)行的語言打包處理成適合的格式以供瀏覽器使用。因?yàn)関ue是發(fā)布所需要的，所以使用以下命令

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

但是光有這兩個(gè)模塊是不夠的，

• webpack 4.x 之后將 cli 單獨(dú)拎了出來，所以還需要webpack-cli模塊，
• 在vue項(xiàng)目中，我們使用了.vue單文件形式，要加載這些單文件我們需要vue-loader模塊，
• 為了轉(zhuǎn)化ES6高級(jí)語法，所以需要 babel-loader @babel/core @babel/preset-env 模塊
• 需要加載css，需要 css-loader模塊，（如果要使用sass，那么還需要node-sass 和 sass-loader）
• 需要引用圖片或者其他資源文件，則需要 url-loader 或 file-loader
• 每次更新代碼后，我們都需要重新編譯以便查看效果，這樣會(huì)很麻煩，使用webpack提供的開發(fā)工具webpack-dev-server可以幫助我們在代碼發(fā)生變化后自動(dòng)編譯代碼
• 最后我們還需要渲染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開發(fā)模式

安裝好模塊后，回顧Nodejs項(xiàng)目，我們現(xiàn)在需要添加npm命令縮寫，webpack配置文件

在package.json的scripts字段中添加npm的命令，（使用webpack-dev-server運(yùn)行）

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

在項(xiàng)目目錄下新建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 的服務(wù)器信息devServer: {// 默認(rèn)配置為http://localhost:8080},// 定義 webpack 的模式mode: 'development',// 配置 loader 載入規(guī)則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'}]},// 添加解析文件后綴，添加后在引入文件時(shí)可以省略后綴只寫文件名resolve: {extensions: ['*', '.js', '.vue', '.json']},// 配置插件項(xiàng)plugins: [// vue-loader 15.x 之后，必須引入這個(gè)插件才能正常工作new VueLoaderPlugin(),// 用來指定渲染的模板文件new HtmlWebpackPlugin({template: './index.html'})] }

配置好webpack后我們需要添加其他文件內(nèi)容，項(xiàng)目結(jié)構(gòu)如下

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

./index.html內(nèi)容

<!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內(nèi)容

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

./src/App.vue內(nèi)容

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

輸入命令npm run dev運(yùn)行程序，就可以看到效果啦~~~，然后修改代碼測試一下vue，看看效果

webpack編譯打包

到這一步其實(shí)就相對容易了，webpack本身就是用于編譯打包，webpack的配置文件也寫好了，只需要使用webpack打包即可

添加build命令，然后使用npm run build命令編譯打包

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

打包完成后，會(huì)在項(xiàng)目目錄下生成/dist文件夾，所有編譯好的文件都在該目錄下

后記

寫到這里，一個(gè)基礎(chǔ)的簡單的vue項(xiàng)目其實(shí)就已經(jīng)搭建好了，整個(gè)過程與其說是 如何從零搭建Vue項(xiàng)目 ，不如說是 如何使用webpack搭建項(xiàng)目 ，所以在今后的學(xué)習(xí)中不妨分成兩個(gè)板塊去學(xué)習(xí)

• 使用 webpack 進(jìn)行項(xiàng)目搭建，了解 webpack 的配置與命令，推薦閱讀 webpack 官方中文文檔
• 如何配置 vue-loader ，推薦閱讀 Vue Loader 官方中文文檔

了解熟悉 webpack 可以讓我們快速搭建前端框架項(xiàng)目或是自定義項(xiàng)目

總結(jié)

以上是生活随笔為你收集整理的Re：从零开始的Vue项目搭建的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。