vue笔记
一、prop属性
Html :
<!--prop属性是-->
<el-form-item label="条线" prop="stripeid" >
<el-select v-model="selectval" filterable placeholder="请选择" @change="onChangeStripe">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
二、自定义组件
<html>
<script type="text/javascript" src="../js/vue.min.js">
</script>
<body>
<pan id="app" :title="message"></pan>
</body>
<script>
// 创建vue实例
var v = new Vue({
el: "#app",
data: {
message: "hello"
}
})
// 定义组件,pan为组件名字，props是要传达的属性，template为模板
Vue.component("pan", {
props: ["title"],
template: "<li>{{title}}</li>"
})
</script>
</html>
三、vue项目结构分析
├── build --------------------------------- 项目构建(webpack)相关配置文件，配置参数什么的，一般不用动
│ ├── build.js --------------------------webpack打包配置文件
│ ├── check-versions.js ------------------------------ 检查npm,nodejs版本
│ ├── dev-client.js ---------------------------------- 设置环境
│ ├── dev-server.js ---------------------------------- 创建express服务器，配置中间件，启动可热重载的服务器，用于开发项目
│ ├── utils.js --------------------------------------- 配置资源路径，配置css加载器
│ ├── vue-loader.conf.js ----------------------------- 配置css加载器等
│ ├── webpack.base.conf.js --------------------------- webpack基本配置
│ ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置
│ ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置
├── config ---------------------------------- 配置目录，包括端口号等。我们初学可以使用默认的。
│ ├── dev.env.js -------------------------- 开发环境变量
│ ├── index.js ---------------------------- 项目配置文件
│ ├── prod.env.js ------------------------- 生产环境变量
│ ├── test.env.js ------------------------- 测试环境变量
├── node_modules ---------------------------- npm 加载的项目依赖模块
├── src ------------------------------------- 我们要开发的目录，基本上要做的事情都在这个目录里。
│ ├── assets ------------------------------ 静态文件，放置一些图片，如logo等
│ ├── components -------------------------- 组件目录，存放组件文件，可以不用。
│ ├── main.js ----------------------------- 主js
│ ├── App.vue ----------------------------- 项目入口组件，我们也可以直接将组件写这里，而不使用 components 目录。
│ ├── router ------------------------------ 路由
├── static ---------------------------- 静态资源目录，如图片、字体等。
├── .babelrc--------------------------------- babel配置文件
├── .editorconfig---------------------------- 编辑器配置
├── .gitignore------------------------------- 配置git可忽略的文件
├── index.html ------------------------------ 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
├── package.json ---------------------------- node配置文件，记载着一些命令和依赖还有简要的项目描述信息
├── .README.md------------------------------- 项目的说明文档，markdown 格式。想怎么写怎么写，不会写就参照github上star多的项目，看人家怎么写的
1、index.html——[主页]
index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuedemo</title>
</head>
<body>
<!-- 定义的vue实例将挂载在#app节点下 -->
<div id="app"></div>
</body>
</html>
2、App.vue——[根组件]
一个vue页面通常由三部分组成：模板(template)、js(script)、样式(style)
<!-- 模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<!-- script -->
//今后，组件相关的data数据、methods方法等，都需要定义到export default所导出的对象中。
// name属性指向的是当前组件的名称（建议：每个单词的首字母大写）
<script>
export default {
name: 'App'
}
</script>
<!-- 样式 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- template
其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如上面代码，父节点为#app的div，其没有兄弟节点）
<router-view></router-view>是子路由视图，后面的路由页面都显示在此处打一个比喻吧,
<router-view>类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示
- script
vue通常用es6来写，用
export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，今后，组件相关的data数据、methods方法等，都需要定义到export default所导出的对象中。 name属性指向的是当前组件的名称（建议：每个单词的首字母大写）
- style
样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped.
如要引入外部css文件，首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入
npm install css-loader,回车。安装完成后，就可以在style标签下import所需的css文件，例如：
<style> import './assets/css/public.css' </style>
3、main.js——[入口文件]
main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，下面的
components:{App}就是引入的根组件App.vue
/*引入vue框架*/
import Vue from 'vue'
/*引入根组件*/
import App from './App'
/*引入路由设置*/
import router from './router'
/*关闭生产模式下给出的提示*/
Vue.config.productionTip = false
/*定义实例，el挂载在index.html上*/
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
4、router——[路由配置]
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
router文件夹下，有一个index.js，即为路由配置文件。
/*引入vue框架*/
import Vue from 'vue'
/*引入路由依赖*/
import Router from 'vue-router'
/*引入页面组件，命名为Hello*/
import Hello from '@/components/Hello'
/*使用路由依赖*/
Vue.use(Router)
/*定义路由*/
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello /*component: ()=> import('@/components/Hello')*/
}
]
})
四、路由设置
1、vue-router 按需加载
//vue异步组件和webpack的【代码分块点】功能结合，实现了按需加载
const App = () => import('../component/Login.vue');
2、合并路由
Vue 多路由文件的合并,路由主入口文件为router文件夹下的index.js文件，当我们想在其他文件下配置路由时，就要考虑路由合并。
-
index.js（路由主入口）
import Vue from 'vue' import Router from 'vue-router' // 导入story文件夹下的路由 import storyRouter from './story' // 导入album文件夹下的路由 import albumRouter from './album' Vue.use(Router) export default new Router({ routes: [ { path: '/helloWorld', component: () => import('@/components/HelloWorld') }, { path: '/content', component: () => import('@/views/Content') }, //引入其他包下的路由 ...storyRouter, ...albumRouter ] }) -
story/index.js（其它包下的路由）
export default[ { path: '/storyTest', component: () => import('@/views/story/index') } ]
五、npm常用命令
#清除npm缓存
npm cache clean --force
#查看node版本列表
nvm list
# 切换node版本
nvm use 10.10.0
#查找8080端口的进程
netstat -ano | findstr 8080
#关闭8080端口对应的进程
taskkill -pid 1060 -f
浙公网安备 33010602011771号