1 创建项目注意点
[ ]可选命令，< >必须命令
创建项目命令不使用中文和驼峰命名
vue create test-project
npm run serve 启动的是项目目录下 package.json 中的"script"属性下的"serve"命令: 开启服务器
2 项目结构
public 整个模块化项目服务器的根目录
- 在地址栏 http://localhost:8080 后面直接加public下的文件名,可以直接访问此文件，
-
http://localhost:8080 省略了index.html，其实访问的就是 http://localhost:8080/index.html，服务器会默认访问根目录下名为 index.html 的文件。
- 如果把index.html名字改掉，那么访问页面直接报错。
-
比如http://localhost:8080/favicon.ico 页面上会出现一个"v"图案
-
所以服务器目录指向public，在这个文件夹内定义能被地址直接访问的静态资源，比如js文件，css文件，图片/视频文件等。
<!--描述当前网站的图标--> <link rel="icon" href="<%= BASE_URL %>favicon.ico">index.html中的 <%= BASE_URL %> 描述项目所在的服务器目录
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
-
项目构建的文件将会被装载到 这条注释后面
在Elements面板会发现还多了一个
<script type="text/javascript" src="/js/app.js"></script>，这是装载项目目录下除public目录中的静态资源以外的其它文件，这些文件打包后整合成一个js文件（app.js）。
-
除public目录以外的目录和文件，都是项目构成时的依赖关联文件。
- 通过多个关联文件构成组件化和模块化开发环境，最终由webpack工具将独立文件合并
node_modules 项目运行时的依赖程序和插件模块，都是node环境下的运行代码，通过npm install手动安装
.gitignore git项目托管的忽略文件
babel.config.js ES语法转换规则配置文件，在项目中最高可使用ES7语法，最后打包时会转换为兼容性的JS语法
package-lock.json 对当前项目的安装模块进行本地记录（可删）
package.json node项目的描述文件（项目名称，版本，依赖环境…）
src 源码目录，存放开发者开发项目时的自定义组件
- main.js 引导文件
3 启动流程和组成文件
npm run serve执行后，会从当前启动目录寻找vue项目的主要引导启动文件：index.html 和 main.js
-
index.html
- index.html为用户页面入口文件，是项目通过访问地址访问时展示的HTML静态主页
- 也是vue项目的容器定义文件
-
main.js
-
vue项目的组件、模块整合入口文件，项目启动依赖于此文件，会加载整合及编译最终运行的js代码
-
import Vue from 'vue' import App from './App.vue'
-
- 定义的模块名称前，没有./或者…/之类的路径前缀，表示该模块为 node环境的核心模块 或者 node_modules中的模块 ；如果有路径，那就根据路径加载对应的模块。
4 特殊的App.vue
-
该文件用于描述模块化项目中，组件的基本构成代码，包含了：
- 页面结构template 2. 组件功能script 3. 组件样式style
<template> <div> <!--定义当前组件的页面结构--> </div> </template> <script> // 定义组件的配置项 </script> <style> /* 定义组件的样式 */ </style>
5 import、export、export default
5.1 import
Vue 是通过 webpack 实现的模块化，因此可以使用 import 来引入模块
- import引入一个依赖包，不需要相对路径。
- import 引入一个自己写的js文件，是需要相对路径的。
import axios from 'axios';
import AppService from './appService';
此外，还可以在 bulid/webpack.base.conf.js 文件中修改相关配置：
resolve: {
// 模块可以省略 ".js"，".vue"，“.json” 后缀，webpack 会在之后自动添加上
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src') // 可以用 "@" 符号代替 "src" 字符串
}
}
5.2 expor t& export default
export 用来导出模块
Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。export 和export default 的区别在于：export 可以导出多个命名模块，例如：
//demo1.js
export const str = 'hello world'
export function f(a){
return a+1
}
对应的引入方式：
//demo2.js
import { str, f } from 'demo1'
export default 只能导出一个默认模块，这个模块可以匿名，例如：
//demo1.js
export default {
a: 'hello',
b: 'world'
}
对应的引入方式：
//demo2.js
import obj from 'demo1'
引入的时候可以给这个模块取任意名字，例如 “obj”，且不需要用大括号括起来。
注：一个js文件中，只能有一个export default；但是可以有多个export 。
扫一扫
755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
