vue环境配置及项目搭建

vue环境配置及项目搭建

安装Vue

独立版本

• 在Vue.js的官网上直接下载vue.js,并在.html中通过 <script>标签中引用. <script src = ../vue.js> </script> 开发环境不要使用最小压缩版,不然会没有错误提示和警告!(页面中直接使用).

使用CDN方法

• BootCDN(国内):https://cdn.bootcss.com/vue/2.2.2/vue.min.js , (国内不稳定)

• unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致.（推荐使用）

• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js.

NPM方法（推荐使用）

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

• 安装node.js

  • 从node.js官网下载并安装node,安装完之后,打开命令行工具(win+R),输入 node -v 命令,查看node的版本,出现相应的版本号,安装成功.

• 安装cnpm

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

• 切换镜像

  • npm config set registry “https://registry.npm.taobao.org”

• 安装vue-cli 脚手架构建工具(必须在全局中进行安装)

  • npm install -g @vue/cli

创建项目

• 在新文件夹下创建项目

  • vue create 项目名

• 选择默认(default)还是手动(Manually)

  • 选择手动(Manually)

• 选择配置 空格选中

  • TypeScript支持使用 TypeScript 书写源码.
  • Progressive Web App (PWA) Support PWA 支持.
  • Router 支持 vue-router .
  • Vuex 支持 vuex .
  • CSS Pre-processors 支持 CSS 预处理器.
  • Linter / Formatter 支持代码风格检查和格式化.
  • Unit Testing 支持单元测试.
  • E2E Testing 支持 E2E 测试.

• 选择Vue版本

• 选择是否使用history router

• 选择css 预处理器

• 选择Eslint代码验证规则

• 选择配置文件放在一个独立的配置文件中,还是放到package.json中

• 是否记录下，以便下次继续使用这套配置

启动项目

• cd 项目名 //进入项目根目录

• npm run serve //启动项目