常州企业网站,免费页面网站制作,电子商务seo优化,wordpress 滑动 评论一、项目构建环境准备
在构建Vue项目之前#xff0c;需要搭建Node环境以及Vue-CLI脚手架#xff0c;由于本篇文章为上一篇文章的补充#xff0c;也是为了给大家分享更为完整的搭建vue项目方式#xff0c;所以环境准备部分采用Vue教程#xff5c;搭建vue项目#xff5c;V…一、项目构建环境准备
在构建Vue项目之前需要搭建Node环境以及Vue-CLI脚手架由于本篇文章为上一篇文章的补充也是为了给大家分享更为完整的搭建vue项目方式所以环境准备部分采用Vue教程搭建vue项目Vue-CLI新版脚手架中介绍的方式本篇文章中就不再赘述
通过以下命令查看安装的版本
macMacdeMacBook-Pro ~ % node -v
v20.12.2
macMacdeMacBook-Pro ~ % vue -V
vue/cli 5.0.8二、搭建Vue项目
使用 Vue-CLI2.x 模板 (旧版本)构建项目
由于我们安装的是新版本 Vue-CLIvue/cli 5.0.8Vue CLI 3 和Vue-CLI2.x旧版使用了相同的 vue 命令所以 Vue CLI 2 (vue-cli) 被覆盖了。如果我们仍然需要使用旧版本的 vue init 功能此时我们需要通过 NPM 全局安装一个桥接工具命令如下
npm install -g vue/cli-init
安装后我们就可以使用老版本命令以老版本结构为基础创建项目了
用vue init webpack命令构建项目
执行一下命令
vue init webpack vue-cli2-case 设置项目名 拉取完模板后会出现如下画面让我们来设置项目名一般文件夹名就是项目名所以直接回车就可以
设置项目描述 接下来会提示让我们设置项目描述不想用默认的就改一下然后回车
设置项目作者 接下来会提示让我们设置项目作者不想用默认的就改一下然后回车
选择运行时版本还是模板编译版本 接下来会提示让我们设置 Webpack 打包时使用的 Vue 版本第一个是模板编译版第二个是运行时版本按照需要自己选就可以按键盘的上下箭头就能进行选择选中的会变成深色字体选好按回车我们选择运行时版本然后回车
是否安装 vue-router 插件 接下来会提示让我们输入 Y 或 n 来确定是否使用 vue-router 插件, 在 Vue 进行单页面应用开发时vue-router可以支持路由跳转功能我们输入了 Y,选择安装
是否安装 ESLint 插件 接下来会提示让我们输入“ Y ” 或 “ n ”来确定是否使用 ESLint 插件, ESLint 是一个静态语法检查的插件它会按照ECMAScript 规范 或 自定义的规范 对代码进行检查我们输入“ n ”选择不安装
是否安装单元测试相关插件 接下来会提示让我们输入“ Y ” 或 “ n ”来确定是否使用单元测试相关插件我们输入“ n ”选择不安装 是否安装 Nightwatch 测试插件 接下来会提示让我们输入“ Y ” 或 “ n ”来确定是否使用 Nightwatch 测试插件我们输入“ n ”选择不安装
10) 依赖的安装方式 接下来会让我们选择以 “ npm ” 还是 “ yarn ” 的方式来安装创建项目所需的依赖我们选 “ npm ” 方式
等待项目构建完成 项目构建需要一段时间请耐心等待 出现如上画面表示项目构建成功啦
验证项目正确性
我直接使用上图中的命令 cd vue-cli2-case npm run dev 查看工程结构 工程结构介绍
整体结构介绍
目录名描述build项目打包的相关配置都是一些对 webpack 进行配置的文件config定义构建相关的变量主要是为了提供给 build 文件夹中的文件使用node_modules通过 npm 下载的项目中使用的依赖包src存放业务相关的代码和资源src - assets存放图片之类的资源文件这个目录中放的都是想被 webpack 的各种 loader 当作模块处理的文件src - components存放项目中想被复用的公共 UI 组件static存放图片之类的资源文件这个目录中的文件打包时会被 CopyWebpackPlugin 插件复制到出口根目录 结构细分介绍
build 目录内文件介绍
文件名描述build.js构建生产环境的代码check-versions.js检查 Node.js 环境 和 NPM 的版本utils.js构建辅助工具类类中主要是通过运算来动态生成 webpack 一些加载器的配置vue-loader.conf.js用来配置 sourceMap项目打包后会对 JS 压缩sourceMap 用来记录代码压缩前后的对应关系方便调试webpack.base.conf.jswebpack 配置文件 - 开发环境和生产环境的通用配置。将基础配置、开发环境和生产环境各对应一个文件比较易于维护webpack.dev.conf.jswebpack 配置文件 - 开发环境的配置webpack 打包过程中内容会与 webpack.base.conf.js 合并webpack.prod.conf.jswebpack 配置文件 - 生产环境的配置webpack 打包过程中内容会与 webpack.base.conf.js 合并
config 目录内文件介绍
文件名描述dev.env.js定义开发环境构建时要用的变量prod.env.js定义生产环境构建时要用的变量index.js定义开发环境和生产环境构建时都要使用的变量 src 目录内文件介绍
文件名描述assets - logo.pngDemo 中要用的图片会被 webpack 的加载器当作模块处理实际项目中的静态资源也建议放在该目录下components - HelloWorld.vueDemo 中定义的组件实际项目中的自定义组件也建议放在该目录下App.vueDemo 中的入口组件实际项目中的入口组件也建议放在这个位置main.jsDemo 中的入口文件里面会定义 Vue 对象并使用入口组件 App.vue
其他文件
文件名描述static - .gitkeep目录内暂时没有内容git 默认不会管理空目录所以目录内习惯建一个空文件 .gitkeep目的是让 git 管理.babelrc该文件用来配置 ES 语法适配插件 - Babel.editorconfig定义代码风格使用 IDE 对代码进行格式化时会参照该文件.gitignore用来定义可以被 git 忽略的文件.postcssrc.js用来配置 PostCSS 插件的该插件用来做跨浏览器样式兼容的能自动添加特殊浏览器的私有前缀index.html主页现在都是单页面应用所以该 html 唯一的作用就是来驱动 main.jspackage.jsonnpm 配置文件README.mdgit 管理的项目可以通过该文件来添加项目说明 至此基于Vue-CLI2.x 模板脚手架搭建的vue2.x项目就分享结束啦希望对大家有所帮助
