anyuan2002.com - vwin网

查找: 您的方位主页 > 网络频道 > 阅览资讯:前端环境装置

前端环境装置

2019-03-30 15:16:26 来历:www.anyuan2002.com 【

运用vue-cli快速树立脚手架的过程中,会触及林林总总的东西,本文仅记录下来每个东西的效果。

Node.js

是根据Chrome V8引擎的JavaScript运转环境,为JavaScript供给了服务端运转的才能。

windows上装置:

  1. 从官网下载装置文件前端环境装置
  2. 运用装置文件装置,默许会选中装置npm并且会增加PATH途径

装置完成后:

  1. node.js会装置在自选的目录下前端环境装置
  2. npm默许在用户目录树立前端环境装置, 该目录是npm大局装置的目录
  3. 增加用户环境变量前端环境装置
  4. 增加体系环境变量前端环境装置

修正大局装置默许途径:

  1. npm config set prefix "D:/Program Files/nodejs/node_global"
  2. npm config set cache "D:/Program Files/nodejs/node_cache"
  3. 修正用户环境变量为D:\Program Files\nodejs\node_global

装置cnpm:

  1. npm install -g cnpm --registry=https://registry.npm.taobao.org 装置淘宝镜像cnpm到大局目录
  2. 增加体系环境变量 前端环境装置 这样才能够运用装置的cnpm指令

卸载:

  1. 卸载直接在控制面板卸载
  2. 主动删去环境变量
  3. 需求手动删去用户目录下的npm相关文件夹

Vue.js

需求node.js的支撑,独自运用vue很简单,能够直接在html代码顶用<script src=" ..."></script>标签引进vue.js文件即可。

或许也能够运用npm装置vue。可是,这都仅仅是vue的功用。为了整合其他的功用,需求运用vue-cli

Vue CLI

Vue.js开发的规范东西,运用它创立一个vue项目,然后这个vue项目会包括各种开箱即用的功用

装置:

  1. 运用 npm install -g @vue/cli 指令 -g表明大局装置,因此会装置到npm大局目录下

装置完成后:

  1. 能够在大局装置目录下查看@vue/cli包前端环境装置
  2. 在指令行下能够运用vue -V查看vue版别

创立Vue项目

  1. 运用vue create appName 在指令行地点目录创立以appName为目录的项目
  2. 前端环境装置default是仅运用babel和eslint 第二个是自定义
  3. 前端环境装置挑选需求的功用
  4. 前端环境装置挑选路由形式 y是history mode n是hash mode
  5. 前端环境装置挑选ESLint 为 规范装备
  6. 前端环境装置挑选对款式的查看是在保存时,仍是提交时
  7. 前端环境装置各种装备文件是分隔写,各自一个文件,仍是悉数写在package.json中
  8. 前端环境装置是否保存本次的设置,供给给之后创立项目的时分运用

项目创立完成后:

看一下package.json,由于挑选了装备文件分隔写,所以package.json内容很少

{
 "name": "vue-imooc-ebook",
 "version": "0.1.0",
 "private": true,
 "scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
 },
 "dependencies": {
  "vue": "^2.6.6",
  "vue-router": "^3.0.1",
  "vuex": "^3.0.1"
 },
 "devDependencies": {
  "@vue/cli-plugin-babel": "^3.4.0",
  "@vue/cli-plugin-eslint": "^3.4.0",
  "@vue/cli-service": "^3.4.0",
  "@vue/eslint-config-standard": "^4.0.0",
  "babel-eslint": "^10.0.1",
  "eslint": "^5.8.0",
  "eslint-plugin-vue": "^5.0.0",
  "vue-template-compiler": "^2.5.21"
 }
}

装置npm模块的指令

  1. npm install -S moduleName 装置模块到项目的node_modules目录 然后在dependencies 依靠
  2. npm install -D moduleName 装置模块到项目的node_modules目录 然后在devDependencies 依靠
  3. 两个依靠的不同之处在于,dependencies在出产环境下仍然打包,后者只要在开发环境起效果正式上线后不会打包

 

 
 
vwin娱乐场

本文地址:http://www.anyuan2002.com/a/question/99994.html
Tags: 前端 装置 环境
修改:vwin网
关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部