[Vue.js] 基础 -- 安装Vue

安装 Vue

版本说明

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器

直接用 < script > 引用

直接引用标签的话,Vue会被注册为一个全局变量

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

使用CDN方法

• 制作原型或者学习

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  

• 生产环境

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  

• 原生ES Modules

  <script type="module">
    import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
  </script>
  

使用NPM方法(推荐)

接下来要安装的东东:

安装的命令
node.js环境（npm包管理器）
vue-cli 脚手架构建工具
cnpm npm的淘宝镜像

• 安装 node.js

从node.js官网直接下载安装即可

输入命令 node -v,查看版本号

输入 npm -v,查看版本信息

• 安装 cnpm

输入 npm install -g cnpm --registry=http://registry.npm.taobao.org

• 安装 vue-cli脚手架构建工具(全局安装)

要提前创建好一个新的文件夹来存放项目

输入 npm install -g vue-cli ,全局安装 vue-cli

输入 vue -V,查看是否安装成功(这里一定是V,不是v)

输入 vue init webpack projectfirst,创建一个基于``webpack` 模板的新项目

1. Project name : 项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写
2. Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
3. Author：作者，如果你有配置git的作者，他会读取。
4. Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
5. Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n（建议），如果你是大型团队开发，最好是进行配置。
6. setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
7. Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n

出现显示成功

点击创建好的目录查看文件是否创建好

目录/文件	说明
build	最终发布的代码的存放位置。
config	配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。
node_modules	npm 加载的项目所需要的各种依赖模块
src	这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：assets:放置一些图片，如logo等。components:目录里放的是一个个的组件文件。 router/index.js：配置路由的地方。 App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的< router-view/ >必不可少。 main.js ：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。
package.json	项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。
webpack.config.js	webpack的配置文件，把.vue的文件打包成浏览器能读懂的文件。
.babelrc	检测es6语法的文件的配置
.getignore	忽略文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）
.postcssrc.js	前缀的配置
.eslintrc.js	配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）
.eslintignore	忽略eslint对项目某些文件的语法规则的检查
README.md	项目的说明文档，markdown 格式

进入项目,安装

$ cd projectfirst
$ cnpm install

输入 npm run dev 或者 npm run start 或者 cnpm run dev

在浏览器中输入 http://localhost:8080

项目完成后输入打包命令: cnpm run build;会生成一个dist文件，就是我们的打包文件，点击.html文件能运行则成功

使用CLI安装

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
$ npm run dev

开发版安装

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build