简单项目
- 开发环境版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> - 生产环境版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
然后就可以开始一个简单的Vue项目开发。
大型项目
- 前提是你已经安装过了node.js 和 cnpm 。使用npm命令和cnpm命令都是可以的，但cnpm 可以更快速的创建项目，npm安装的比较慢，而且很可能会因为网络问题而出错，所以使用cnpm稳一点。下面是cnpm的全局安装。
npm install cnpm -g --registry=https://registry.npm.taobao.org
-
vue-cli是一个官方发布vue.js项目脚手架，使用vue-cli可以快速创建vue项目，全局安装。
//全局安装脚手架
cnpm install -g vue-cli
- 开始一个Vue项目。
vue init webpack xxx(项目名字)
//或者
vue init webpack
//如果在命令行没有写项目名称，可以 cd 进入想要放置的文件夹，再运行上面的 vue init webpack 就可以了。
- 启动项目，完成。
npm run dev
结构解读
- src目录，因为大部分的内容都是围绕这个目录进行的。工作目录。
- build目录，webpack配置。
- config是配置目录，包括端口号等
- node_modules是项目依赖模块
- static是静态资源文件
- package.json是整个项目配置文件
- .babelrc 。 babel 配置文件,把es6及更高级的编译成es5。
- .editorconfig 。编辑配置文件,帮助开发人员在不同的编辑器和IDE中定义和维护一致的编码风格。
- .gitignore 。用来过滤一些版本控制的文件，比如node_modules文件夹。
- index.html 一个总的入口文件
src目录结构
- assets为一些资源文件的目录
- components是基础的组件,放一些公共的模块
- views 一些视图模块，但不是公共的，可以是单个的，只用一次的。
- router可以设置路由，即完成单页面切换的效果
- app.vue 是一个主体的入口，一切从这里开始
- main.js 属性其他语言开发的同学会知道，每个程序都有一个主入口，main可以配置一些核心文件和信息
vue加载页面过程
- 浏览器访问项目，最先访问的是
index.html文件。 - 在
index.html中,上面有一个id为app的挂载点。 - 在
main.js中，初始化一个Vue实例，在Vue实例中，通过new Vue({ el: '#app',})告诉该实例要挂载的地方；（即实例装载到index.html中的位置) - 接着，实例中注册了一个局部组件App，这个局部组件App来自于哪儿呢？
import App from './App.vue'。 -
app.vue是个根组件。在App.vue里<template>里写的内容会一直显示，无论路由怎么跳转。所以可以放头部尾部等一些一直存在的组件。
image.png
app.vue解读
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
App.vue是一个组件,并且是根组件。必须要有export default 来表示对外输出本模块。
在App.vue里<template>里写的内容会一直显示，无论路由怎么跳转。所以可以放头部尾部等一些一直存在的组件。
main.js解读
main.js是项目的入口文件。
有两个作用：
- 初始化vue实例，将其挂载到
index.html中id为app的节点上。 - 加载各种公共组件，插件。
-
import的写法
import Vue from 'vue';
//完整写法
import Vue from "../node_modules/vue/dist/vue.js";
import App from './App';
//完整写法，引入APP.vue
import App from './App.vue';
也可以省略掉from直接引入
Vue.use()
一般什么时候要用呢？又什么时候不用呢？
一般是router 和 vuex,store 不要用Vue.use(),是放在new Vue({router,vuex, store})。
然后如果是外部的组件就要用到Vue.use()。
总结
- 一般把头部尾部一些固定的组件放到
App.vue文件中。 - components是基础的组件,放一些公共的模块，可以复用的组件。
- views 放一些视图模块，但不是公共的，可以是单个的，只用一次的。
-
main.js里有两个作用，一是初始化实例，二是引入需要的模块。 - 一般是
router 和 vuex,store不要用Vue.use(),是放在new Vue({router,vuex, store})。然后如果是外部的组件就要用到Vue.use()。
