Vue初始化项目及Vue注意事项

使用vue-cli搭建项目

vue init webpack test
cd test
npm install
npm run dev

项目结构分析

test
|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .editorconfig: 通过编辑器的编码/格式进行一定的配置
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件

项目源码目录设计

编码测试与打包发布项目

1、编码测试
npm run dev
访问:http://localhost:8080
编码，自动编译打包，查看效果
2、打包发布
npm run build
npm install -g serve
serve dist
访问 : http://localhost:5000

若使用vue creat创建项目

则静态文件 放在assets文件夹里面，路由组件放在views里面

route中meta属性

route中可以编写meta属性，

meta：{
	showbar:true
}

然后在组件中使用

<bar  v-show='$route.meta.showbar'/ >

如果组件中不用显示在route中可以不用添加meta属性，空即为false

v-for 和v-if不建议一块用：

官方解释
永远不要把 v-if 和 v-for 同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做：

• 为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

• 为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。