vue.js 是前端一个比较火的 MVVM 框架, 是一套构建用户界面的渐进式框架. vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
vue.JS 为什么用 cnpm 镜像来安装?
在用 Vue.JS 构建大型应用的时候推荐使用 NPM 安装方法, NPM 能很好的和诸如 webpack 或者 Browserify 模块打包器配合使用. 但于 NPM 是国外的, 使用起来比较慢; 就可以使用淘宝的 cnpm 镜像来安装 vue.
首先我们需要下载 NPM, 安装好了 node.JS, 就安装了 NPM. 然后, 再利用 NPM 安装淘宝镜像的 cnpm.
1, 打开 cmd, 输入命令
NPM install -g cnpm --registry=https://registry.npm.taobao.org
安装 Vue 需要 NPM 的版本大于 3, 所以我们先升级一下 NPM, 输入命令
cnpm install cnpm -g
安装 vue, 输入命令
cnpm install vue
安装 vue-cli, 输入命令
cnpm install --global vue-cli
这时, 环境已经搭建好了.
2, 指定存放项目的路径, 运行命令
vue init webpack "项目名称"
成功以后, 进入项目所在的目录, 运行命令
cd "项目所在文件夹"
然后依次执行下面的命令
cnpm install
cnpm run dev
中间省略部分截图....
成功后我们进入浏览器, 输入 localhost:8080 会展示下面的页面.
项目目录:
接下来我们看看上面成功创建的项目, 进入项目目录
我们开发的目录是在 src,src 中包含下面的目录
assets: 存放突变
components: 存放一个组件文件
App.vue: 项目入口文件, 我们也可以直接将组建写这里, 而不使用 components 目录
main.JS: 项目核心文件
我们看看 App.vue 的内容
- <template>
- <div id="app">
- <img src="./assets/logo.png">
- <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-OS X-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
- margin-top: 60px;
- }
- </style>
Hello.vue
- <template>
- <div class="hello">
- <h1>{{ msg }}</h1>
- <h2>Essential Links</h2>
- <ul>
- <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
- <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
- <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
- <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
- <br>
- <li>
- <a href="http://vuejs-templates.github.io/webpack/" target="_blank">
- Docs for This Template
- </a>
- </li>
- </ul>
- <h2>Ecosystem</h2>
- <ul>
- <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
- <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
- <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
- <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
- </ul>
- </div>
- </template>
- <script>
- export default {
- name: 'hello',
- data () {
- return {
- msg: 'Welcome to 菜鸟教程'
- }
- }
- }
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- h1, h2 {
- font-weight: normal;
- }
- ul {
- list-style-type: none;
- padding: 0;
- }
- li {
- display: inline-block;
- margin: 0 10px;
- }
- a {
- color: #42b983;
- }
- </style>
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17030.html