使用HbuilderX快速构建Vue项目工程
什么是Vue项目工程化开发？
HTML开发的痛点：
在很多 Vue 项目中，我们使用
Vue.component来定义全局组件，紧接着用new Vue({ el: '#container '})在每个页面内指定一个容器元素。
- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复 elementui el-button 模块化
- 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 `` 没有语法提示
- 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
单文件组件：
文件扩展名为
.vue的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
Vue项目工程化开发：
首先，Vue的思想：利用数据及组件来驱动。工程化就是为了让前端开发能够“自成体系”，从模块化、组件化、规范化三个方面体现：
1 模块化： 代码划分为一系列职责单一，高度解耦且可替换的模块。===》可维护及扩展性强
2 组件化：页面或功能进行组件化分割并开发。===》单文件组件，多人开发，互不干扰。
3 规范化： 项目开发规范化可操作性强。 ===》好的规范会直接影响到开发质量和效率。
- 目录结构的制定
- 编码规范 HTML JS CSS 附件 命名 前后端接口规范
- 文档规范
- 组件管理
Vue项目 工程化与html开发的区别
- 由原来直接html页面开发，变成在vue的单文件组件以源码开发。
- 引入组件、js库或者vue插件、CSS等资源，要以模块化的思想，来import和export。万物皆可模块化
- 要预先定义组件和url的关系，即路由，来实现页面的跳转、重定向、前进或后退。
- 增加了由源代码vue===>编译===》打包成html再发布的过程 webpack工具
相同点
- 都是在写html css js
- 最后 部署 都是 html结构
创建Vue项目
-
利用官网的VueCLI 脚手架工具 - 安装工具
安装nodejs 或将hbuilderX插件中的node和npm设置成环境变量 path
查看命令 node -v 和 npm -v
- 新建vue-cli目录
- npm i vue-cli
- 查看vue 版本
- vue create 项目名 or vue ui 使用可视化工具
-
利用HbuilderX 新建Vue项目
调整HbuilderX npm的仓库源 改成国内淘宝镜像
cd E:\tools\HBuilderX\plugins\npm
查看命令：npm config get registry
调整命令：npm config set registry registry.npm.taobao.org
Vue目录解析 (以HbuilderX构建为例)
node_modules文件夹：用来存放用包管理工具下载安装的包的文件夹。ElementUI、Axios等工具都放到这里。
public文件夹： 公共资源 index.html 是将来打包后的入口文件。
src 源代码文件夹: 我们的开发工作主要在此进行。
bable.config.js: bable.js:该工具为了把高版本的ES6编译成低版本的，以保证浏览器兼容性。该文件是其配置文件。
package.json: 是Vue项目的整体配置文件，一般包括有项目启动、打包命令，声明依赖包等。npm install 构建项目时，必不可少的文件。
package-lock.json:是当 node_modules 或 package.json发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新
postcss.config.js:postcss：是一个利用JS插件来对CSS进行转换的工具
README.md 说明书
vue源代码目录
assets文件夹：静态文件夹，存放静态资源，如img、css、fonts等。
components：组件文件夹，存放.vue的单页面公共组件。
App.vue: 项目的根（root）组件,项目的运行主入口。
main.js：项目的核心文件，首先执行的文件。
运行项目
运行Vue项目 == 执行 npm run serve 指令
- HbuilderX 运行->运行到浏览器/内部浏览器 自动执行 'npm run serve' 注：需在打开vue文件
- 选中项目，右键外部命令 'npm run serve'
- 打开windows的CMD或power shell控制台，CD到项目目录，运行npm run serve （需要在计算机中安装nodejs环境，否则npm无法执行，或者将HbuilderX插件中的npm目录加到系统的环境变量Path中）
package.json命令：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
serve：利用vue-cli-service来启动服务
build：利用vue-cli-service来进行打包
停止项目
crtl+c Y 或 crtl+c 两次
App.vue 单文件组件 源码分析
单文件应用：SPA single page applcation
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
单文件组件，是以.vue为后缀的文件。
由三个闭合标签构成：
template: html代码，即组件中的template属性，里面存放的时html标签。
script：js代码，定义组件的name，实例化Vue对象，并导出export default到项目中
style： css代码
单文件的含义，即用一个vue文件，来表示一个组件。
import export 语法
导出语法：
export {}
用大括号包围导出的变量名，多个以逗号分隔。
let v = '你好';
const num = 200;
let arr = [
1, 3, 5, 7, 8
]
let obj = {
username: '王小二',
age: 20,
fun: function() {
console.log(this.username + this.age);
}
}
let clog = function(info) {
console.log("导出的信息" + info);
}
export {
v,
clog,
num,
arr,
obj
}
导入语法：
import {clog,v,obj} from './export.js'
导入用大括号接收导出的成员名，多个以逗号分隔。 from：文件的路径，同级目录前加"./"
import {clog,v,obj} from './export.js'
export default {
name: 'app',
components: {
HelloWorld
},
mounted(){
clog('哈哈哈啊')
console.log(v);
obj.fun()
}
}
</script>
使用 import ** from ** 和 import ‘路径’ 还有 import {a, b} from ‘模块标识’ 导入其他模块
export default 导出 1个
export default obj
import obj from './export.js'
import 此处接收的变量名，可以自定义。
创建一个NavList的组件
- 创建template html结构
- export default 导出
- 在App.vue中导入
- 在App.vue的template中书写自定义组件标签名
打包项目
运行Vue项目 == 执行 npm run build指令
转载自:https://juejin.cn/post/7126169435760492574