|
NodeJS 安装乐成之后，接下来安装 Vue的器材：
- npm install -g vue-cli # 只必要第一次安装时执行
- vue init webpack my-project # 行使webpack模板建设一个vue项目
- cd my-project #进入到项目目次中
- npm install # 下载依靠（假如在项目建设的最后一步选择了自动执行npm install，则该步调可以省略）
- npm run dev # 启动项目
启动乐成后，赏识器输入 http://localhost:8080 就能看到如下页面：
执行 npm install 呼吁时，默认行使的是海外的下载源 ，可以通过如下代码设置为行使淘宝的镜像：
- npm config set registry https://registry.npm.taobao.org
修改完成后，就能有用进步下载的乐成率。
Vue 项目布局先容
Vue 项目建设完成后，行使 Web Storm 打开项目，项目目次如下：
- build 文件夹，用来存放项目构建剧本
- config 中存放项目标一些根基设置信息，最常用的就是端口转发
- node_modules 这个目次存放的是项目标全部依靠，即 npm install 呼吁下载下来的文件
- src 这个目次下存放项目标源码，即开拓者写的代码放在这里
- static 用来存放静态资源
- index.html 则是项目标首页，进口页，也是整个项目独一的HTML页面
- package.json 中界说了项目标全部依靠，包罗开拓时依靠和宣布时依靠
对付开拓者来说，往后 99.99% 的事变都是在 src 中完成的，src 中的文件目次如下：
assets 目任命来存放资产文件
components 目任命来存放组件(一些可复用，非独立的页面)，虽然开拓者也可以在 components 中直接建设完备页面。
保举在 components 中存放组件，其它单独新建一个 page 文件夹，专门用来放完备页面。
router 目次中，存放了路由的js文件
App.vue 是一个Vue组件，也是项目标第一个Vue组件
main.js相等于Java中的main要领，是整个项目标进口js
main.js 内容如下：
- import Vue from 'vue'
- import App from './App'
- import router from './router'
- Vue.config.productionTip = false
- /* eslint-disable no-new */
- new Vue({
- el: '#app',
- router,
- components: { App },
- template: '<App/>'
- })
- 在main.js 中，起首导入 Vue 工具
- 导入 App.vue ，而且定名为 App
- 导入router，留意，因为router目次下路由默认文件名为 index.js ，因此可以省略
- 全部对象都导入乐成后，建设一个Vue工具，配置要被Vue处理赏罚的节点是 '#app'，'#app' 指提前在index.html 文件中界说的一个div
- 将 router 配置到 vue 工具中，这里是一个简化的写法，完备的写法是 router:router，假如 key/value 千篇一律，则可以简写。
- 声明一个组件 App，App 这个组件在一开始已经导入到项目中了，可是直接导入的组件无法直接行使，必必要声明。
- template 中界说了页面模板，即将 App 组件中的内容渲染到 '#app' 这个div 中。
因此，可以揣摩，项目启动乐成后，看到的页面结果界说在 App.vue 中
- <template>
- <div id="app">
- <img src="./assets/logo.png">
- <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 是一个vue组件，这个组件中包括三部门内容：1.页面模板(template);2.页面剧本(script);3.页面样式(style)
- 页面模板中，界说了页面的 HTML 元素，这里界说了两个，一个是一张图片，另一个则是一个 router-view
- 页面剧本首要用来实现当前页面数据初始化、变乱处理赏罚等等操纵
- 页面样式就是针对 template 中 HTML 元素的页面美化操纵
（编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
