郑州哪家做网站好,盐城网站开发基本流程,中国制造网官方网站首页,语音定制软件Vue工程化项目
随着多年的发展#xff0c;前端越来越模块化、组件化、工程化#xff0c;这是前端发展的大趋势。webpack是目前用于构建前端工程化项目的主流工具之一#xff0c;也正变得越来越重要。本章节我们来详细讲解一下如何使用webpack搭建Vue工程化项目。
1 使用we…Vue工程化项目
随着多年的发展前端越来越模块化、组件化、工程化这是前端发展的大趋势。webpack是目前用于构建前端工程化项目的主流工具之一也正变得越来越重要。本章节我们来详细讲解一下如何使用webpack搭建Vue工程化项目。
1 使用webpack构建Vue项目
1.1 什么是webpack
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器static module bundler。在 Webpack 处理应用程序时它会在内部创建一个依赖图dependency graph用于映射到项目需要的每个模块然后将所有这些依赖生成到一个或多个 bundle。
Webpack 可以做到按需加载。像 Grunt、Gulp 这类构建工具打包的思路是
遍历源文件 匹配规则 打包这个过程中做不到按需加载即对于打包起来的资源到底页面用不用打包过程中是不关心的。
Webpack 跟其他构建工具本质上不同之处在于Webpack 是从入口文件开始经过模块依赖加载、分析和打包三个流程完成项目的构建。在加载、分析和打包的三个过程中可以针对性的做一些解决方案达到按需加载的目的比如code split拆分公共代码等。
当然Webpack 还可以轻松的解决传统构建工具解决的问题
模块化打包语法糖转换预处理器编译项目优化解决方案封装流程对接
1.2 webpack中配置Vue开发环境
在webpack中配置Vue开发环境的过程如下。
项目初始化
在硬盘上创建项目的根目录例如 d:\myapp在 myapp 目录下启动命令行工具执行以下命令
npm init -y上面命令运行成功后会在myapp目录下自动创建package.json文件。
安装依赖
在myapp目录下的命令行工具中依次执行以下命令
# 安装 vue 依赖
npm i vue# 安装 webpack 和 webpack-cli 开发依赖
npm i webpack webpack-cli -D# 安装 babel
npm i babel-loader babel/core babel/preset-env -D# 安装 loader
npm i vue-loader vue-template-compiler -D# 安装 html-webpack-plugin
npm i html-webpack-plugin -D创建目录结构与文件
在myapp目录下依次新建 public 和 src 目录。 在public目录下新建 index.html 文件代码如下
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8 /titleWebpack Vue Demo/title/headbodydiv idapp/div/body
/html在src目录下分别新建main.js和App.vue文件。 main.js文件代码如下
import Vue from vue;
import App from ./App.vue;Vue.config.productionTip false;new Vue({render: h h(App)
}).$mount(#app);App.vue文件代码如下
templatediv idappHello Vue Webpack/div
/templatescriptexport default {};
/script配置webpack.config.js 在myapp目录下新建 webpack.config.js配置文件配置内容如下
const HtmlWebpackPlugin require(html-webpack-plugin);
const VueLoaderPlugin require(vue-loader/lib/plugin);module.exports {enter: ./src/main.js,resolve: {alias: {vue$: vue/dist/vue.esm.js},extensions: [*, .js, .vue, .json]},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: babel-loader}},{test: /\.vue$/,loader: vue-loader}]},plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({template: ./public/index.html,filename: index.html})]
};Vue 的配置文件中关于 Vue 语法的模板需要使用vue-loader来处理。完成上面配置后执行下npx webpack看下 dist 输出结果。
1.3 webpack配置本地服务器
webpack-dev-server 就是一个 Express 的小型服务器它是通过 Express 的中间件 webpack-dev-middleware和 Webpack 进行交互的。在开发过程中如果项目本身就是个 Express 服务器那么可以使用 webpack-dev-middleware 和 webpack-hot-middleware 两个中间件来实现 HMR 功能。
webpack-dev-server具体操作如下。
安装与启动
webpack-dev-server安装命令如下
npm i webpack-dev-server安装成功后执行以下命令启动本地服务器
npx webpack-dev-server执行webpack-dev-server命令之后它会读取 Webpack 的配置文件默认是 webpack.config.js然后将文件打包到内存中所以看不到dist文件夹的生产Webpack 会打包到硬盘上这时候打开 server 的默认地址localhost:8080就可以看到文件目录或者页面默认是显示 index.html没有则显示目录。
自动刷新
在开发中我们希望边写代码边看到代码的执行情况webpack-dev-server 提供自动刷新页面的功能可以满足我们的需求。webpack-dev-server 支持两种模式的自动刷新页面。
iframe模式页面被放到一个 iframe 内当发生变化时会重新加载inline模式将 webpack-dev-server 的重载代码添加到产出的 bundle 中。
两种模式都支持模块热替换Hot Module Replacement。模块热替换的好处是只替换更新的部分而不是整个页面都重新加载。 执行以下命令开启自动刷新
webpack-dev-server --hot --inline2 Vue CLI脚手架工具
Vue CLI是一个基于 Vue.js 进行快速开发的完整系统致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接这样就可以使开发者只专注与撰写应用而不必浪费很多时间去研究项目搭建中配置的问题。
Vue CLI 有以下几个独立的部分。
CLI
CLI (vue/cli) 是一个全局安装的 npm 包提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目或者直接通过 vue serve 构建原型。
CLI服务
CLI 服务 (vue/cli-service) 是一个开发环境依赖属于一个 npm 包局部安装在每个 vue/cli 创建的项目中。CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。
CLI插件
CLI 插件是向 Vue 项目提供可选功能的 npm 包例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头非常容易使用。
2.1 脚手架安装
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。更新依赖版本命令如下
npm install -g vue/cli
# 或者
yarn global add vue/cli安装之后就可以在命令行中访问 vue 命令。还可以通过运行一些简单的 vue 命令来验证它是否安装成功。 例如可以执行命令来检查其版本命令如下
vue --version如需升级全局的 Vue CLI 包可以运行以下命令
npm update -g vue/cli
# 或者
yarn global upgrade --latest vue/cli2.2 使用脚手架创建Vue项目
运行以下命令来创建一个新项目
# myapp为项目名
vue create myapp执行上面的命令会被提示选取一个 preset。可以选默认的包含了基本的 Babel ESLint 设置的 preset也可以选“手动选择特性”来选取需要的特性如下图所示。
默认的设置非常适合快速创建一个新项目的原型而手动设置则提供了更多的选项它们是面向生产的项目更加需要的。如果使用了手动选择特性在操作提示的最后可以选择将已选项保存为一个将来可复用的 preset。 具体的选项操作可以参考下图所示。
上面的选项执行完成后会提示如何启动项目如下图所示。
根据命令行工具的提示依次执行下面命令即可启动项目
# 进入项目目录
cd myapp
# 启动项目
npm run serve上面命令执行成功后会在命令行工具显示项目的IP地址和端口号如下图所示。 在Google Chrome浏览器中访问http://localhost:8080打开项目的首页效果如下图所示。
4.2.3 项目结构与文件描述 把创建好的项目在Visual Studio Code以下简称VSCode开发工具中打开项目的目录结构如下图所示。
目录结构解析
vue-cli4.0版本脚手架工具创建的项目结构如下表所示。
目录/文件说明node_modulesnpm 加载的项目依赖模块public用于存放静态资源文件启动本地服务器后该目录为服务器访问的根目录。目录下存放index.html文件src这里是我们要开发的目录基本上要做的事情都在这个目录里。babel.config.jsbabel相关的配置文件package.jsonnpm相关的配置文件package-lock.jsonnpm相关的配置文件用于锁定依赖包的版本号README.mdMarkdown格式的项目说明文档
index.html文件
public目录下的index.html文件是项目的静态页面当前创建的项目为单页面应用SPA所以整个项目中只有一个静态的HTML文件index.html文件代码如下
!DOCTYPE html
html langenheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href% BASE_URL %favicon.icotitle% htmlWebpackPlugin.options.title %/title/headbodynoscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv idapp/div!-- built files will be auto injected --/body
/htmlmain.js文件
src为项目的源码文件的管理目录项目中编写的代码都要放到这个目录下在该目录下的main.js文件为整个项目的入口文件关于项目的全局配置都要放到该文件中。 代码如下
import Vue from vue
import App from ./App.vue
import router from ./router
import store from ./storeVue.config.productionTip falsenew Vue({router,store,render: h h(App)
}).$mount(#app)App.vue文件
在src目录下还有一个很重要的文件就是项目的根组件App.vue文件该文件一般用于项目的一级路由的管理。因为新建的项目中会对App.vue编写初始化的页面内容而且这些内容对后期的开发没有价值所以我们在正式开发前会对App.vue文件进行修改。 代码如下
templatedivrouter-view//div
/templatescriptexport default {}
/script
