VUE 安装

直接 <script> 引入

直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

官网提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告。

下载

使用独立版本安装

引入

将下载的 vue 项目,下载放入项目内,在页面中用<script>标签引入

  1. <script src="./vue.js"></script>

CDN

推荐:https://unpkg.com/vue, 会保持和 npm 发布的最新的版本一致。可以在 https://unpkg.com/vue/ 浏览 npm 包资源。

也可以从 jsDelivr,BootCDN 或 cdnjs 获取,不过这两个服务版本更新可能略滞后。

使用

使用时直接引用网上的 CDN 资源

  1. <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

NPM

在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

装包

安装最新稳定版的 vue

  1. npm install vue

使用 vue-cli

vue-cli 其中 cli ,cli 的意思是命令行。vue-cli 的作用就是搭建开发基础环境的。相当于 react 的,create-react-app 。

参考: https://github.com/vuejs/vue-cli

Simple CLI for scaffolding Vue.js projects

简单的命令行,用来生成 Vuejs 项目脚手架

装包

全局安装 vue-cli

  1. npm install --global vue-cli
创建一个基于 webpack 模板的新项目

Vue-cli 对比于 create-react-app ,有一个优势,就是可以生成多种脚手架(通过替换模板 template 来实现)

  1. vue init <template-name> <project-name>

我们选择最专业的模板,也就是 webpack 模板

  1. vue init webpack vuex-demo

创建项目时会出现一些配置选项,下面是一些配置说明

  1. liuenqing@liuenqing-PC:~/Documents$ vue init webpack vuex-demo
  2. ? Project name vuex-demo //项目名默认就是x-caht
  3. ? Project description A Vue.js project // 文档描述
  4. ? Author l552177239 <552177239@qq.com> // 作者,如果有git,就是读取git的User信息
  5. ? Vue build standalone // 有两个选项,选第一个 recommended for most users
  6. ? Use ESLint to lint your code? Yes// 是否使用ESlint 默认是
  7. ? Pick an ESLint preset Standard // 选这个一个ESlint类型
  8. ? Setup unit tests with Karma + Mocha? No //使用单元测试工具karma和mocha 默认是
  9. ? Setup e2e tests with Nightwatch? No // 使用e2e测试框架 NightWatch 默认是

小贴士:选项中,比较重要的就是选择使用 ESlint

  1. Standard : JS ”标准“ 代码风格:点击查看

  2. Airbnb : Airbnb 公司的代码风格:点击查看

两种标准的风格很多地方都不同,比如写不写分号,选择 Standard 不用写分号

安装依赖

进入项目文件夹下,安装依赖包

  1. cd my-project && npm install
打开项目
  1. npm run dev

参考