此处将为大家介绍关于element-ui和npm、webpack、vue-cli搭建Vue项目的详细内容，并且为您解答有关elementuinpm的相关问题，此外，我们还将为您介绍关于1、vuevue
此处将为大家介绍关于element-ui和npm、webpack、vue-cli搭建Vue项目的详细内容，并且为您解答有关element ui npm的相关问题，此外，我们还将为您介绍关于1、vue vue2.0 vue-cli vue-router webpack、nodejs+npm+webpack+vue+ElementUI+vue-route、npm(nodejs package manager)、webpack、Vue组件、Vue脚手架开发工具、Vue Router的使用、Vuex的使用、使用Django前后端交互、npm、webpack、vue-cli的有用信息。
本文目录一览：- element-ui和npm、webpack、vue-cli搭建Vue项目（element ui npm）
- 1、vue vue2.0 vue-cli vue-router webpack
- nodejs+npm+webpack+vue+ElementUI+vue-route
- npm(nodejs package manager)、webpack、Vue组件、Vue脚手架开发工具、Vue Router的使用、Vuex的使用、使用Django前后端交互
- npm、webpack、vue-cli
element-ui和npm、webpack、vue-cli搭建Vue项目（element ui npm）
一、element-ui的简单使用
1、安装
1. npm 安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
2. CDN
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2、element和Vue的使用示例(NavMenu导航菜单的使用)
1. 导入需要使用的JS文件
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 去element官网找到需要的组件
我们这里简单的展示一下导航菜单，把需要的样式复制到我们的HTML页面(这里我只用一个样式，就只复制那个样式)
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-menu>
3. 定制我们的Vue
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>教育网</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.el-menu {
display: flex; /*弹性盒子/CSS3的一个新特性*/
align-items: center; /*水平居中*/
justify-content: center; /*垂直居中*/
}
</style>
</head>
<body>
<div id="app">
<my_header></my_header>
<router-view></router-view>
</div>
<template id="header">
<div>
<!--设置了router=true后，el-menu-item就等于router-link，index就等于to-->
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true">
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/course">免费课程</el-menu-item>
<el-menu-item index="3">轻课</el-menu-item>
<el-menu-item index="4">学位课程</el-menu-item>
<el-menu-item index="5">智能题库</el-menu-item>
<el-menu-item index="6">公开课</el-menu-item>
</el-menu>
</div>
</template>
<script>
let my_header = {
// 把菜单导航设置成Vue实例的组件
template: "#header",
data() {
return {
// 默认选中
activeIndex: ''/'',
}
}
};
let url = [
{
path: ''/'',
component: {
template: `<div><h1>这是首页</h1></div>`
}
},
{
path: ''/course'',
component: {
template: `<div><h1>免费课程页面</h1></div>`
}
},
];
let router = new VueRouter({
routes: url
});
const app = new Vue({
el: "#app",
router: router,
components: {
my_header: my_header
},
})
</script>
</body>
</html>
二、Node.js和npm
1、什么是Node.js和npm
Node.js是一个Javascript运行环境(runtime environment)，实质是对Chrome V8引擎进行了封装。
Node.js不是一个 JavaScript 框架，不同于CakePHP、Django、Rails。Node.js 更不是浏览器端的库，不能与 jQuery、ExtJS 相提并论。
Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
而npm是Node.js的包管理工具。
好吧，类比一下python：
Node.js就是你的python解释器。
npm就等于python解释器的pip，用于管理(安装，卸载)包的工具。
Node.js有它自己的语法，我们这里安装Node.js主要是为了使用它的npm，方便我们搭建Vue项目，至于它的语法，有兴趣的可自行研究。
注意：node.js和python解释器一样，需要自己到官网去下载并安装。
2、npm介绍和常用指令
1. npm的安装和更新
下载安装Node.js后自带包管理工具npm。
查看安装版本信息：
-- node -v 查看Node.js 版本信息
-- npm -v 查看npm版本信息
更新npm到指定版本：
-- npm install npm@5.3.0 -g
-- npm install npm@latest -g 更新最新的稳定版本
命令参数(S、D、g)：
npm install module_name -S 即 npm install module_name –save 下载到dependencies(生产环境)
npm install module_name -D 即 npm install module_name –save-dev 下载到devDependencies(开发环境)
npm install module_name -g 下载到全局
模块将被下载安装到【全局目录】中。
【全局目录】通过 npm config set prefix "目录路径" 来设置。
比如说，当我们使用了npm install -g express安装了express框架后， 我们就可以在电脑里的某一个文件夹下，打开控制台，直接使用express mvc创建项目，如果不是全局安装的会遇到 “''express'' 不是内部或外部命令，也不是可运行的程序”错误。
npm install module_name 本地安装,将模块下载到当前命令行所在目录(将安装包放在：命令行所在目录/node_modules 下)
2. npm 常用操作
之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目，而且要管理版本。
有了npm，我们管理自己的依赖包以及版本更加简单。
到自己项目目录下，进行以下命令：
-- npm init -y 输入-y使用默认配置项 生成package.json文件。
-- npm i jquery@0.0.0 简写i是install的简写 下载依赖 不写@ 默认最新版本
-- npm uninstall jquery 卸载依赖包
-- npm update jquery 更新依赖包
-- npm list 列出已安装的依赖
-- npm install webpack --D 保存为开发环境依赖
-- 老版本需要 --save 参数 现在不需要了
我们的项目目录下会生成一个 node_modules 目录，我们用npm下的包会在这个目录下。
我们所有的依赖信息放在package.json文件中，包括我们所有的依赖以及版本。
如果我们删掉 node_modules目录，可以使用 npm i 来下载所有依赖。
3. npm 常用配置项
当我们用npm init 的时候用了参数 -y，如果不用-y我们可以进行一些配置。
在我们的package.json文件中有很多配置项
-- name 项目名字 中间不能有空格只能用小写
-- version 项目版本
-- description 项目描述信息
-- main 项目的入口文件
-- scripts 指定命令的快捷方式 npm run test test是scripts里的键名 值为具体命令
-- author 作者
-- license 许可证
-- dependencies 生成环境依赖的包以及版本信息
-- devDependencies 开发环境的依赖
三、webpack3版本
1、webpack是什么
webpack是一个模块打包器
它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适
的格式以供浏览器使用。
2、安装和配置
webpack是跑在Node.js环境下的，所以确定自己有node环境。
安装方式：
-- npm install webpack -g 全局安装(webpack3版本可以直接使用webpack安装)
-- webpack <要打包文件> <打包后文件> 全局这种方式进行打包
-- npm install webpack 在自己的项目下 npm init 后在下载webpack 这就是局部安装
-- node_modules/.bin/webpack <要打包文件> <打包后文件> 项目里要打包文件是入口文件
-- 路径太长 太烦 可以自定义命令 在package.json 文件的 scripts下面自定义
3、entry 和 output
entry 入口文件 output 出口文件
上面我们自定义命令的时候 命令太长了，而且我们命令太多的时候我们需要每次都自定义多条命令
我们可以把命令写在webpack.config.js文件中
module.export = {
// 所有的入口文件
entry: {
home: ''./main.js'',
login: ''./login.js'',
},
// 出口文件
output: {
filename: ''[name].bundle.js'',
path: __dirname + ''/dist'',
}
}
// backage.json 下的scripts
scripts: {
"pack": "node_moudles/.bin/webpack --watch"
}
// 运行命令
npm run pack
四、webpack4版本(新特性)
1、 在4版本中，webpack不再单独使用，需要webpack-cli
-- 全局安装 npm install webpack webpack-cli -g
-- 局部安装 npm install webpack webpack-cli -D
2、 增加了模式区分 （development, production）
webpack --mode development/production 进行模式切换
development 开发者模式 打包默认不压缩代码
production 生产者模式 上线时使用，压缩代码。 默认是这个模式
3、默认入口文件(入口文件需自己创建)是./src/index.js，默认输出文件./dist/main.js
-- 当只有一个入口文件也就是src/index.js时，无需增加webpack.config.js
-- 因此打包后，别的HTML页面只需要引入main.js即可使用
4、多入口以及多出口(不是必要的配置项)
// webpack.config.js配置
entry: {
// 多入口
a: "./src/js/index.js",
b: "./src/js/index2.js",
}
output: {
// 多出口
path: path.resolve(__dirname, ''dist''),
filename: ''./js/[name].bundle.js''
}
5、打包
1. 在webpack4中需要手动创建src文件夹，在src文件夹下，新建index.js作为入口文件
2. 打包命令
单独使用webpack打包
webpack --mode development(开发模式)
webpack --mode production(生产模式)
6、export/import补充
0. 补充
export default 某个变量
import 变量名1 from xx
1. my.js
let name = ''明仔'';
function func() {
console.log(123);
}
const age = 18;
export {name, func}
// 每个文件只能有一个export default，且只抛出一个值
export default age
2. index.js
import {name, func} from "./my"
// 导入export默认抛出的变量，并改名为aaggee
import aaggee from "./my"
console.log(name);
console.log(aaggee);
func();
五、vue-cli 2版本
1、用vue-cli搭建项目
0. 友情提示
vue-cli自带webpack和vue.js,
当对象的键和值的变量名称相同时，可简写成一个变量，
在vue-cli项目中使用npm下载的包，导入时不需要写路径，直接可以导入，但必须起别名
例如：npm i vue-router
那么：
在main.js中使用时，只需要直接导入即可
import VueRouter from ''vue-router''
// 导入后需要让vue对象使用它
Vue.use(VueRouter)
vue-cli是官方提供的快速构建这个单页面应用的脚手架。
根据官方文档中的构件流程：前提是已经安装了node.js 否则npm都用不了
1. 使用npm全局安装vue-cli
npm install vue-cli -g
常见报错以及解决办法错误一：
报错：npm ERR! Unexpected end of JSON input while parsing near ''...ectories":{},"dist":{''
解决办法： npm cache clean --force
错误二：
如果没有node_moudels文件夹
执行 npm i
然后执行 npm run build
然后再启动项目
如果在执行npm i 时候遇到第一个错误 按照第一个错误的解决办法
错误三：
webpack-dev-server 不是内部命令
请卸载重装
命令
npm uninstall vue-cli -g
npm install vue-cli -g2. 安装完成后在自己的工作空间里输入下面命令 vue init webpack 项目名称 输入命令后进入安装阶段，需要用户输入一些信息
3. 切换到我们的项目目录下
cd 到项目目录下
npm run dev --> 启动项目
4. 项目中需要使用一些.vue后缀的文件，需要下载vue.js插件
Setting --> Plugins --> 搜索vue.js并下载 --> 重启pycharm
2、目录结构
-- build 打包的所有文件
-- config 配置文件，执行文件需要的配置信息
-- src 资源文件(工作目录) 所有的组件以及所有的图片 都在这个文件夹下
-- node_modules 项目的所有依赖包
-- static 静态资源
-- package.json 依赖包的json文件
-- index.html 单页面应用
3、Vue搭建的单页面项目解耦分析
1. 项目中的index.html就是我们的单页面
2. src/main.js就是我们这个单页面index.html对应的js文件
3. src/App.vue就是我们这个单页面index.html的app作用域的组件， .vue后缀的文件都是组件的配置信息
4. main.js解析
new Vue({
el: ''#app'',
components:{App},
template: ''<App/>''
})
el: ''#app'' 是index.html 的<div id="app"></div>
components是注册组件
<App/> 他就是App.vue，是组件的配置信息
根实例的template就是选择vue根实例要加载的组件，会把index.html里面的内容替换成加载的组件的内容
App.vue是主程序，其他所有的.vue都是放在App.vue中，所以只需要加载App.vue就完全可以把其他的东西加载出来
5. 其他组件就放在src/components里面，后缀使用.vue。src/assets是存放图片的
6. .vue后缀的文件就是我们组件的配置信息
7. 把配置信息命名抛出后，在我们的主组件APP.vue可以导入并使用，也就是说其他组件都是抛出给主组件导入使用的
<template>
<div id="app">
<h1>这是单页面应用的大组件App组件</h1>
<!--子组件-->
<my_header></my_header>
</div>
</template>
<script>
// 导入子组件配置信息
import MyHeader from "./components/MyHeader"
export default {
name: ''APP'',
// 在这里定义子组件
components: {
my_header: MyHeader
},
}
</script>
<style>
</style>
8. 如果需要路由vue-router，则使用npm i vue-router下载这个js
然后在src下面新建一个routers文件夹用于创建vue-router实例，然后抛出，main.js导入后即可使用路由
9. 在vue-cli的项目中，组件component必须解耦，也就是说component组件的配置内容都得写在一个.vue文件中，然后抛出，导入使用
component单数，代表只有一个组件，component: 组件名(配置信息名)
components复数，代表有几个组件，components: {组件名1: 配置信息名1, 组件名2: 配置信息名2}，如果组件名和配置信息名一样，
可以只写一个名字 components:{组件名1, 组件名2}
4、vue-cli配置JQuery、bootstrap
1. 下载安装
-- npm install jquery
-- npm install bootstrap
2. 修改build/webpack.base.conf.js
注意：vue-cli3版本中如果没有webpack.base.conf.js，那么手动创建一个webpack.base.conf.js
const webpack = require(''webpack'')
// 在module.exports里添加插件
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery",
// Popper: [''popper.js'', ''default'']
})
],
// *******下面是如果手动下载bootstrap用的*******
resolve: {
extensions: [''.js'', ''.vue'', ''.json''],
alias: {
''vue$'': ''vue/dist/vue.esm.js'',
''@'': resolve(''src''),
// 如果是手动下载的bootstrap需要添加这个配置
// ''assets'': path.resolve(__dirname, ''../src/assets''),
// ''jquery'': ''jquery/src/jquery''
}
},3. 修改主程序的js文件 main.js
import $ from ''jquery''
import ''bootstrap/dist/css/bootstrap.min.css''
import ''bootstrap/dist/js/bootstrap.min.js''
六、vue-cli 3版本
1、下载vue-cli 3.0
-- npm install @vue/cli -g
-- 报错 npm error 可以运行下面命令(清理缓存)
-- npm cache clean --force && npm cache verify
2、创建项目
-- vue create 项目名称
3、目录结构以及配置文件
-- vue-cli3 目录更加简单
-- 我们手动在项目根目录下创建vue.config.js里面写vue的配置信息
4、vue-cli3 配置jQuery、bootstrap
-- 跟vue-cli2一样的配置，手动创建一个webpack.base.conf.js
1、vue vue2.0 vue-cli vue-router webpack
因为网速还可以，所以我就是用了npm下载，可以使用淘宝镜像，把 npm 的地方换成 cnpm 就可以啦！没有安装淘宝镜像的童鞋可以搜搜。。
注：各版本内容（node 7.5.0，npm 4.1.2 ，vue 2.8.1）
查看vue版本vue -V，记得要大写
项目实际安装版本（vue：2.2.2，vue-router：2.3.0，less：2.7.2）
1、npm init webpack sousou
注:（1）sousou是项目名
（2）创建json数据时不使用router、ESlint、test内容
2、cd sousou
注：进入到创建好的sousou文件夹
3、npm install
注：下载packjson.json里面设置插件依赖！
4、npm run dev
注：项目跑起来啦！
补充说明（main .js）：
版本一：
import Vue from ''vue''
import App from ''./App''
/* eslint-disable no-new */
new Vue ({
// vue 1.x 写法
el: ''#app'',
template: ''<App/>'',
components: { App }
})
版本二：
import Vue from ''vue''
import App from ''./App''
/* eslint-disable no-new */
new Vue ({
// vue 2.x 写法
el: ''#app'',
render: x => x(App)
})
大家可以更改过后再运行npm run dev，项目一样可以跑起来哦！
重点在后面
5、因先前没有下载vue-router
现在下载使用命令 ：
npm install vue-router less --save-dev
注：因为要使用less预处理器，所以就和vue-router一起下载啦
6、在 src文件夹 下面新建一个 router文件夹，并在其里面新建一个router.js文件
vue-router相关设置可以查看官方中文 文档 https://router.vuejs.org/zh-c...
英文好的童鞋可以查看英文文档。
import Vue from ''vue''
import VueRouter from ''vue-router''
Vue.use(VueRouter)
const First = {template: ''<div>first的内容</div>''}
const Second = {template: ''<div>second的内容</div>''}
const Home = {template: ''<div>home的内容</div>''}
const router = new VueRouter({
mode: ''history'',
base: __dirname,
// 记得是routes，不是router，要不然显示不了导航相关页面内容
routes: [
{path: ''/'', component: Home},
{path: ''/first'', component: First},
{path: ''/second'', component: Second}
]
})
new Vue({
router,
template: `
<div id = ''new''>
<h1> 导航 </h1>
<ul>
<li><router-link to=''/''> 首页 </router-link></li>
<li><router-link to=''/first''> 第一 </router-link></li>
<li><router-link to=''/second''> 第二 </router-link></li>
</ul>
<router-view></router-view>
</div>
`
}).$mount(''#app'')
7、main.js只输入，因为main.js是入口文件
import Vue from ''vue''
import Router from ''./router''
8、npm run dev 就可以看到设置的内容啦
今天就先介绍到这里啦！
后续有更新哦！
精彩内容请看后续文档！
nodejs+npm+webpack+vue+ElementUI+vue-route
- nodejs安装，https://nodejs.org/en/download/，windows系统安装msi文件
- nodejs安装自带npm，升级npm
npm install npm -g
淘宝国内npm镜像安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
- webpack安装，安装webpack模块，-g代表全局安装，去掉则问当前目录下的安装
npm install webpack -g
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
cnpm install css-loader style-loader -g
- vue安装
# 最新稳定版
$ npm install vue -g
- elementUI安装
npm i element-ui -S
npm(nodejs package manager)、webpack、Vue组件、Vue脚手架开发工具、Vue Router的使用、Vuex的使用、使用Django前后端交互
13.8 npm(nodejs package manager)
使用命令行安装包:1. cd切换到项目目录下，执行初始化操作 npm init/npm init -y2. 安装其他依赖包npm install jquerynpm install jquery@1.11.13npm install jquery -g 全局安装npm install bootstrap@3 -D 开发环境下marked包安装和使用 npm install marked -D npm install vuex -D3. 卸载包 npm uninstall 包名4. 更新npm npm install npm@latest 5. npm安装包慢的解决办法： 1.安装cnpm包 ：https://npm.taobao.org/ npm install -g cnpm --registry=https://registry.npm.taobao.org 2. 配置npm源为阿里源 npm config set registry https://registry.npm.taobao.org/在当前项目下生成文件：node_moduels(包含用npm导入的jQuery包等)、package.json、pack-lock.json(包含导入包的信息)
index.html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script> $.each([11,22,33], function(k,v){ console.log(k,v) }) </script></body></html>13.9 webpack
为什么要有webpack？1. JS中不存在模块化的概念2. 安装和使用npm install webpack -g --> 全局安装npm install webpack-cli -g3. webpack进阶：https://webpack.js.org/在当前项目下生成文件：dist(包含main.js,将项目下的依赖关系文件打包保存在main.js文件中)、node_moduels(包含用npm导入的jQuery包等)、package.json、pack-lock.json(包含导入包的信息)
x.js:
var alex = ''sb'';var login = true;module.exports = {alex}y.js:
var obj = require(''./x'')var jquery = require(''jquery'')console.log(obj); //sbjquery.each([11,22,33,44], function(k,v){ console.log(k,v)})main.html:
<body><script src="./dist/main.js"></script></body>13.10Vue组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body> <div id="app"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> <component-a></component-a> <ComponentB //父组件向子组件通信 v-for="a in aList" v-bind:url="a.url" v-bind:title="a.title" ></ComponentB> <p> 被选了{{num}}次！</p> <!--子组件向父组件通信--> <ComponentC v-for="name in nameList" v-bind:name="name" v-on:do="foo" ></ComponentC> <table> //组件的is属性 <!-- <ComponentB></ComponentB> 此时组件中template中的tr会显示在table外--> <tr is="ComponentB"></tr> //此时组件中template中的tr会显示在table中的tbody中 </table> </div> <script src="./node_modules/vue/dist/vue.js"></script> <!--通过npm导入vue.js--> <script> //全局注册组件：定义一个名为button-counter的新组件 Vue.component(''button-counter'', { /* data: { count: 0 } */ data: function (){ //data 必须是一个函数,不能直接是对象，组件复用时会影响到其他实例 return { count: 0 } }, template: ''<button v-on:click="count++">你点了我 {{ count }} 次。</button>'' }) //局部注册组件：局部注册的组件在其子组件中不可用，如果你希望ComponentB在ComponentA中可用，需声明 const ComponentA = { components: { ComponentB }, template: `<a href=''https://www.sogo.com''>点我</a>`, data: function(){ return { } } } //父组件向子组件通信 const ComponentB = { //template: `<a> <slot></slot></a>`,通过插槽slot分发内容 //template: ` <tr><slot></slot></tr>`,组件的is属性 template: `<p><a v-bind:href=''url''>{{title}}</a></p>`, props: { //在子组件中使用props声明将url、title传入组件template并显示 url: String, //对传值进行校验 title: { type: String, required: true } }, data: function(){ return { } } } //子组件向父组件通信 const ComponentC = { //子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件 template: `<button v-on:click=''$emit("do")''>{{ name }}</button>`, props: { //使用props声明将name传入组件template并显示 name }, methods: { do(){ } } } var vm = new Vue({ el: ''#app'', components:{ //局部注册组件需要在components中声明 ''component-a'': ComponentA, ComponentB, ComponentC }, data: { num:0, nameList: ["技师A", ''技师B'', ''技师C''], aList: [ { url: ''https://www.sogo.com'', title: ''sogo'' }, { url: ''https://www.luffycity.com'', title: ''luffycity'' }, { url: '''', title: ''oldboy edu'' }, ] }, methods: { foo(){ this.num += 1; } } }) </script></body></html>13.11Vue脚手架开发工具
1. 安装npm install -g vue-cli2. 使用查看安装的vue-cli版本：vue -V查看帮助：vue --help查看支持的模板：vue list3.创建Vue项目webpack简单模板：vue init webpack-simple app01webpack模板：(使用Bootstrap时候要用这个):vue init webpack vueapp01 ? Project name vueapp01 ''回车确认'' ? Project description A Vue.js project ''回车确认'' ? Author Lmy <1592187014@qq.com> ''回车确认'' ? Vue build (Use arrow keys) ? Vue build (standalone) > Runtime + Compiler: recommended for most users ''回车确认'' Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere ? Install vue-router? ''Yes'' ? Use ESLint to lint your code? ''No'' ? Set up unit tests No ''(设置单元测试)'' ? Setup e2e tests with Nightwatch? ''No'' ''（用夜视器设置e2e测试?）'' ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) ''（npm）'' > Yes, use NPM ''回车确认'' Yes, use Yarn No, I will handle that myself 。。。。（ vue-cli · Generated "vueapp01".）。。。。（Installing project dependencies ...）。。。。 Project initialization finished!。。。。。。''''''To get started: cd vueapp01 npm run dev''''''C:\untitled>cd vueapp01C:\untitled\vueapp01>npm run dev ''(启动前端服务)'''' Your application is running here: >''停止项目：Ctrl + C 4.在当前项目下安装bootstrapC:\untitled\vueapp01>npm install bootstrap@3.3.7 -D 或者 npm install bootstrap@3.3.7 --save-d''安装开发环境下的bootstrap，并将依赖关系写入package.json中''13.12Vue Router的使用
两个组件（Vue Router内置组件）：
<router-link to="/foo">Go to Foo</router-link> #默认渲染成a标签<router-view></router-view> #路由视图，组件显示位置制作组件路由：
components/Home.vue
<template> <div> <h1>这是home页面</h1> //vue文件中，组件template一定要用div包裹所有标签 </div></template><script>export default { name:''Home'',}</script><style></style>components/Note.vue
<template> <div> <h1>这是note页面</h1> </div></template><script>export default { name:''Note'',}</script><style></style>router/index.js
import Vue from ''vue''import Router from ''vue-router''import HelloWorld from ''@/components/HelloWorld''import Home from ''@/components/Home.vue'' //从组件导入，@代表srcimport Note from ''@/components/Note.vue'' Vue.use(Router)export default new Router({ mode:''history'', //去掉URL中的''#'' routes: [ //设置组件路由对.........
npm、webpack、vue-cli
Node.js npm
什么是Node.js 以及npm
简单的来说 Node.js 就是运行在服务端的JavaScript，基于Chrome V8 引擎的。
npm 是Node.js 的包管理工具。
npm的安装和更新
Node.js下载安装 Node.js 官网下载安装。npm自带的包管理工具。
查看安装版本信息：
-- node -v 查看Node.js 版本信息
-- npm -v 查看npm版本信息
更新npm到指定版本：
-- npm install npm@5.3.0 -g
-- npm install npm@latest -g 更新最新的稳定版本
npm 常用操作
之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目，而且要管理版本。
有了npm，我们管理自己的依赖包以及版本更加简单。
到自己项目目录下，进行以下命令：
-- npm init -y 输入-y使用默认配置项 生成package.json文件。
-- npm i jquery@0.0.0 简写install 为 i 下载依赖 不写@ 默认最新版本
-- npm uninstall jquery 卸载依赖包
-- npm update jquery 更新依赖包
-- npm list 列出已安装的依赖
-- npm install webpack --D 保存为开发环境依赖
-- 老版本需要 --save 参数 现在不需要了
我们的项目目录下会生成一个 node_modules 目录，我们用npm下的包会在这个目录下。
我们所有的依赖信息放在package.json文件中，包括我们所有的依赖以及版本。
如果我们删掉 node_modules目录，可以使用 npm i 来下载所有依赖。
npm 常用配置项
当我们用npm init 的时候用了参数 -y，如果不用-y我们可以进行一些配置。
在我们的package.json文件中有很多配置项
-- name 项目名字 中间不能有空格只能用小写
-- version 项目版本
-- description 项目描述信息
-- main 项目的入口文件
-- scripts 指定命令的快捷方式 npm run test test是scripts里的键名 值为具体命令
-- author 作者
-- license 许可证
-- dependencies 生成环境依赖的包以及版本信息
-- devDependencies 开发环境的依赖
webpack
webpack3
webpack是什么
webpack是一个模块打包器，它将根据模块的依赖关系进行静态分析，
然后将这些模块按照指定的规则生成静态资源。
那么，我们为什么要用这个东西呢~~因为前端的包袱太多，历史遗留问题太重~~~脑补吧......
安装和配置
webpack是跑在Node.js环境下的，所以确定自己有node环境。
安装方式：
-- npm install webpack -g 全局安装
-- webpack <要打包文件> <打包后文件> 全局这种方式进行打包
-- npm install webpack 在自己的项目下 npm init 后在下载webpack 这就是局部安装
-- node_modules/.bin/webpack <要打包文件> <打包后文件> 项目里要打包文件是入口文件
-- 路径太长 太烦 可以自定义命令 在package.json 文件的 scripts下面自定义
entry 和 output
entry 入口文件 output 出口文件
上面我们自定义命令的时候 命令太长了~~而且我们命令太多的时候我们需要每次都自定义多条命令~~
我们可以把命令写在webpack.config.js文件中~~
module.export =文件
'./main.js''./login.js'文件
'[name].bundle.js'+ '/dist'
"pack": "node_moudles/.bin/webpack --watch"<span>//<span> 运行命令
npm run pack
npm run pack
webpack4
webpack的新特性
1,webpack不在单独使用，需要webpack-cli
-- 全局安装 npm install webpack webpack-cli -g -D
-- 局部安装 npm install webpack webpack-cli -D
2,增加了模式区分 （development,production）
--webpack --mode development/production 进行模式切换
-- development 开发者模式 打包默认不压缩代码
-- production 生产者模式 上线时使用，压缩代码。 默认是这个模式
3，固定入口目录为src，与入口默认文件index.js，打包后文件在新增的dist目录下
-- 当只有一个入口文件也就是src/index.js时，无需增加webpack.config.js
4，多入口以及多出口
