一、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:80801.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，都是作者先将共享的代码放到某个公共的代码仓库，用户先在配置文件中配置好要使用的依赖，然后通过一个命令就能下载下来。
仓库npmmaven仓库地址http://registry.npmjs.orghttps://mvnrepository.com代码仓库registryrepositorytaobao镜像http://registry.npmjs.orghttps://mvnrepository.com配置文件package.json “dependencies”: {“vue”: “^2.5.13”}pom.xml软件npm(node package manager)apache-maven下载命令npm installmvn install打包生成的目录disttargetnpm: 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 -S4.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
