工信部外国网站备案,手把手教你网上开店,网络公司网站建设方案,网站与网络的区别Re#xff1a;从零开始的Vue项目搭建初始的终结与结束的开始Nodejs项目的简单测试从零开始webpack开发模式webpack编译打包后记初始的终结与结束的开始 最开始接触vue项目搭建是从vue-cli开始#xff0c;模板式操作#xff0c;一键搞定#xff0c;几乎可以无缝进入代码开发… Re从零开始的Vue项目搭建初始的终结与结束的开始Nodejs项目的简单测试从零开始webpack开发模式webpack编译打包后记初始的终结与结束的开始 最开始接触vue项目搭建是从vue-cli开始模板式操作一键搞定几乎可以无缝进入代码开发阶段这对新人来说很友好马上就能够一边看教程一边测试代码我当初就是这么学vue的顺便提一下我在学习vue之前没接触过任何前端框架连Nodejs都没接触过以前做前端的时候只会htmlcss/sassjs这种形式但是这对新人也不好因为模板搭建的东西往往很全面全面就意味着东西很多至于项目是怎么运行的那些模板生成的文件都代表什么意思在项目中起到什么作用等等等对新人来说一时半会儿很难搞清除尤其是像我这总没接触过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中随便写的东西方便我们看到效果比如h1hello 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\myprojectnpm run start myproject1.0.0 start D:\wwwroot\myprojectnode ./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-devwebpack开发模式 安装好模块后回顾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 langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue/title /head bodydiv idapp/div /body /html./src/main.js内容 import Vue from vue import App from ./Appnew Vue({el: #app,render: h h(App) })./src/App.vue内容 templatediv idappVue App/div /templatescript export default {name: App } /scriptstyle #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 可以让我们快速搭建前端框架项目或是自定义项目