vue.js+npm+element-ui学习笔记
一、vue.js是什么
1.1 简介
它是一个轻量级的MVVM框架。
使用 数据驱动+组件化 来开。
数据双向绑定(当修改视图时数据也会赋值给model，当更改model的时候也会反应到视图上)。
页面上每个独立的可视或者可交互的区域均视为一个组件，每个组件对应一个工程目录(文件夹)，组件所需要的各种资源尽可能的都放在这个目录下就近维护(即将模板、样式、js等都写在一个.vue文件中)，组件可以嵌套自由组合，形成完整的页面。
1.2 vue脚手架初始化项目
# 1.安装vue-cli脚手架(用于初始化项目)
$ npm install -g vue-cli
$ 2. 创建项目
$ vue init webpack <project name>
# 3. 安装cnpm(此步骤不是必须的)
# 有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所以还需要npm的国内镜像—cnpm
npm install -g cnpm –registry=http://registry.npm.taobao.org
# 4. 安装依赖包
$ cd <project name>
# cnpm 需要单独安装，如果没有cnpm可以使用npm来代替
$ cnpm install
# 5. 启动程序就可以在浏览器访问
$ npm run dev
# 6. 在浏览器访问localhost:8080
1.3 脚手架目录结构
build : webpack相关的配置
config：webpack相关的配置，index.js中可以配置服务的端口，默认是8080, useEslint默认是true，当启动检查代码格式时可以设置为false
node_module : npm install安装的依赖代码库
src : 源码文件，开发都会在该目录下进行
assets: 存放一些静态资源
components：组件，存放.vue文件，每个组件分为三部分：template、script、style
router：路由，配置url路径对应的组件
App.vue
main.js ：entry入口文件
static : 存放一些静态资源
test：单元测试相关
.babelrc: babel编译的相关配置
.editorconfig : 编辑器相关的配置(比如字符集、缩进的空格等)
.eslintignore : 配置需要或略的路径，一般build、config、dist、test等目录都会配置忽略
.eslintrc.js : 配置代码格式风格检查规则, 如每行代码是否强制使用分号; 代码缩进是使用空格还是tab等，在启动工程的时候会进行严格的检查，如果不满足格式就会启动失败，主要是让所有开发人员保持强一致的开发风格。主要是extends: [“standard”]、rules等配置。
.gitignore : git或略的文件
index.html : 入口文件，编译时会将其它代码插入到index.html中
package.json : 项目的配置文件，scripts用于配置的脚本，其中dev和build非常常用，启动项目就是使用npm run dev命令，这里的dev就是scripts中的dev, npm start就是对npm run dev的简写；devDependencies用于编译时的依赖，开发时需要，上线时用不到；
1.4 基本流程
1.在控制台中输入npm run dev,然后在浏览器上访问http://localhost:8080/#/helloworld
2。通过router/index.js配置好的/helloworld路径(path)找到对应的组件(component) HelloWorld.vue
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/helloworld',
name: 'HelloWorld',
component: HelloWorld
}
]
})
HelloWorld.vue 就是要访问的内容
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'HelloWorld.vue'
}
}
}
</script>
<!-- style 标签省略了 -->
HelloWorld.vue的内容将会替换到App.vue中
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<!-- style 标签省略了 -->
App.vue的内容将会注入到index.html中的body标签里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>platform-webapp</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
二、Vue.js技术栈
npm：node.js的包管理工具，用于同一管理我们前端项目中需要用到的包、插件、工具、命令等，便于开发和维护。
ES6：Javascript的新版本，ECMAScript6的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。
Babel：一款将ES6代码转化为浏览器兼容的ES5代码的插件
vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。
vue-router： Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。
vuex：Vue提供的状态管理工具，用于同一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。
webpack：一款强大的文件打包工具，可以将我们的前端项目文件同一打包压缩至js中，并且可以通过vue-loader等加载器实现语法转化与加载。
三：npm
- 简介
在传统的前端开发中我们会经常引入jquery、bootstrap、echarts等js插件，我们首先去插件的每个官网去下载下来，然后放到自己前端工程中static/js目录下，我们每引用一个插件都要去官网下载，然后将下载的插件拖到工程中来，美国的一个程序员Isaac Z. Schlueter就做够了这种机械运动，想简化这个流程，于是做了这样一件事：
买了台服务器作为代码仓库(registry), 用于存放被共享的代码
发邮件分别通知各大JS插件作者(如jQuery的作者、bootstrap的作者、Vue的作者、element-ui的作者等等)让他们使用npm publish 命令将自己的JS插件提交到registry中
用户如果想使用某个JS插件可以先在package.json中配置一些需要安装的插件名称和对应的版本号(依赖dependency)，然后通过npm install命令来下载它们，下载下来的插件自动放在node_modules目录下面
这套思想和maven是完全一样的，熟悉maven或者gradle的也就自然理解npm了，只不过npm用于js,maven用于java，都是作者先将共享的代码放到某个公共的代码仓库，用户先在配置文件中配置好要使用的依赖，然后通过一个命令就能下载下来。
| 仓库 | npm | maven |
|---|---|---|
| 仓库地址 | http://registry.npmjs.org | https://mvnrepository.com |
| 代码仓库 | registry | repository |
| taobao镜像 | http://registry.npmjs.org | https://mvnrepository.com |
| 配置文件 | package.json “dependencies”: {“vue”: “^2.5.13”} | pom.xml |
| 软件 | npm(node package manager) | apache-maven |
| 下载命令 | npm install | mvn install |
| 打包生成的目录 | dist | target |
npm: Node Package Manager, 一种用Node.js开发的工具用于发布插件到仓库和从插件仓库中下载插件的工具，一种用于共享JS代码的工具。
2. 如何安装npm
由于node.js当时也缺少一个包管理器，npm也是使用node.js开发的，这个工具使用的人较少，后来node.js的作者和npm的作者沟通一下将npm作为node.js包管理器，内置到node.js中，后来由于node.js大火，npm使用的人也越来越多，越来越多的JS插件通过npm被共享，现在几乎常用的插件都能在npm中找到，现在的npm已经发展成为前端共享代码的标准了。因为npm已经内置于node.js当中了，所以安装了node.js也就安装了npm, 可以通过node -v 和 npm -v 分别查看对应的版本。
3. 如何生成package.json文件
npm init : 用于生成一个基础的package.json文件，里面包含名称、版本号、描述、主文件、作者、协议等
package.json
{
"name": "platform-webapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
四、集成Element
4.1 安装element-ui
# 切换到项目根目录
$ cd <project root dir>
# 安装element-ui, 安装后package.json中dependencies就会增加element-ui依赖
$ cnpm i element-ui -S
4.2 在main.js中配置element-ui
在main.js中增加导入和让Vue使用ElementUI
import Vue from 'vue'
import App from './App'
import router from './router'
// 导入element-ui
import ElementUI from 'element-ui'
Vue.config.productionTip = false
// Vue使用ElementUI
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
4.3 安装依赖
cnpm install
4.4 使用element-ui
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<el-button type="primary">主要按钮</el-button>
<el-input-number v-model="num" :min="1" :max="10" @change="handleChange"></el-input-number>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'HelloWorld.vue',
num: 5
}
},
methods: {
handleChange(value) {
console.log(value)
}
}
}
</script>
4.5 重新启动，访问
npm run dev
五：参考文章
搭建vscode+vue环境 https://blog.csdn.net/mao834099514/article/details/79138484
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
