[JavaScript知识库]2.VUE_环境配置

Vue官网：https://cn.vuejs.org/

一、安装

• 官网安装：https://vuejs.org/js/vue.min.js，然后用<script>导入
• Staticfile CDN（国内）: https://cdn.staticfile.org/vue/2.2.2/vue.min.js
• NPM方法
  因为nmp是和Node.js一起安装的包管理工具，所以安装Node.js：

1. 下载并安装：https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi
2. 查看node版本：node -v
3. 查看npm版本（相当于pip）：npm -v
4. 使用淘宝定制的cnpm代替默认的npm（国内用npm很慢）：npm install -g cnpm -- registry=https://registry.npm.taobao.org
5. 安装：cnpm install vue
6. Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。（vue-cli脚手架）

# 使用npm安装 vue-cli
$ npm install -g @vue/cli

#使用淘宝淘宝npm镜像源
$ cnpm install -g @vue/cli

7. 进入项目，安装并运行：

创建项目文件夹然后切到文件夹下
$ cd my-project
$ vue create 项目名
$ ONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

8.访问http://localhost:8080（Vue.js 不支持 IE8 及其以下 IE 版本）

• 如果使用npm安装创建项目，那么Vue.js目录结构如下：

主要的目录文件说明

• config：配置目录，包括端口号等，可以使用默认的
• node_modules：npm加载的项目依赖模块
• publc/index.html：首页入口文件，可以添加一些meta信息或统计之类的代码，不需要webpack打包的文件
• src：这里是要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
• assets: 放置一些图片，如logo等
• components: 该目录放所有的组件文件
• App.vue: 项目入口文件，也可以直接将组件写这里
• main.js: 项目的核心文件
• static：放置静态资源，比如图片、字体等
• test：测试目录，不需要可删除
• .xxxx文件：一些配置文件，包括语法配置，git配置
• package.json：项目配置文件
• README.md：项目的说明文档，markdown 格式
  还有一种方式，创建出来的vue结构目录和上面的不一样
  下载并安装node.js：https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi

安装国内cnpm：`npm install -g cnpm --registry=https://registry.npm.taobao.org`
安装vue-cli：`cnpm install -g @vue/cli`