vue项目环境搭建

一、node.js下载和安装

官网下载安装nodejs，会自动捆绑安装npm，具体步骤省略。

二、express 安装

npm install express -g
npm install -g express-generator  -----g在前不会安装到全局（坑）
npm install  express-generator -g 全局安装

三、安装教脚手架

3.1 安装或更新全局vue

npm install vue -g

3.2 安装或更新全局路由：

npm install vue-router -g

3.3 安装脚手架

npm install @vue-cli –g

四、webpack安装

4.1.webpack-cli 安装

npm i webpack-cli -g

4.2 查看版本：

webpack -v

提示：

webpack: not installed
webpack-cli: 4.9.0
webpack-dev-server not installed

4.3 webpack 安装

npm install webpack -g//配置全局的webpack
npm install webpack --save-dev

4.4 安装 webpack-dev-server

npm install webpack-dev-server -g

4.5 安装vue安装或更新全局vue

npm install vue -g

安装或更新全局路由：

npm install vue-router -g

安装脚手架

npm install @vue-cli –g

五、查看版本

环境变量：   echo  %PATH%
node版本：  node  -v
npm版本：   npm -v
vue版本：   vue -V
express版本号： express --version
webpack版本号： webpack -v

六、修改npm的本地仓库：

npm config set prefix "D:\Develop\nodejs\node_global"  --save
npm config set cache "D:\Develop\nodejs\node_cache"  --sava

七、环境变量：

系统：

NODE_PATH（新增）
D:\Develop\nodejs\node_globa\node_modules（坑：在查看webpack -v报错）
D:\Develop\nodejs\node_globa

用户：

path（添加）
D:\Develop\nodejs\node_cache（坑：在查看webpack -v报错）
D:\Develop\nodejs\node_global

到此这篇关于vue项目环境搭建的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue项目环境搭建详细总结

    Vue项目环境搭建详细总结

    关于Vue安装的详细步骤总结 安装NodeJs 首先解释一下什么是nodejs,为什么要安装node?node的优点? node.js是一个运行在chromeJavascript运行环境下(俗称GoogleV8引擎)的开发平台,用来方便快捷的创建服务器端网络应用程序,也可以把它理解为一个轻量级的JSP或PHP环境,如果用来开发Web应用的话,有时要便捷很多. node.js的最大优点是处理并行访问,如果一个web应用程序同时会有很多访问连接,就能体现使用node.js的优势. 另一个好处是,使用

  • 搭建vue开发环境

    搭建vue的开发环境: 1.必须要安装nodejs 2.搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm install --global vue-cli ( 此命令只需要执行一次 ) 3.创建项目     必须cd到对应的放项目的文件夹里,例如项目放vue文件夹里,则cd vue,然后再进行下面的命令(vue-demo01为项目名) vue init webpack vue-demo01 cd vue-dem

  • vue.js开发环境搭建教程

    vue.js开发环境搭建教程

    vue.js开发环境搭建教程分享,具体内容如下 1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架 在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装... 2).输入:vue -V,回车,若出现vue信息说明表

  • Vue 搭建Vuex环境详解

    目录 搭建Vuex环境 总结 搭建Vuex环境 在src目录下创建一个文件夹store,在store文件夹内创建一个index.js文件 index.js用于创建Vuex中最核心的store // scr/vuex/index.js // 引入Vuex import Vuex from 'vuex' // 用于响应组件中的动作 const actions = {} // 用于操作数据 const mutations = {} // 用于存储数据 const state = {} // 创建sto

  • 手把手搭建安装基于windows的Vue.js运行环境

    手把手搭建安装基于windows的Vue.js运行环境

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 在配置环境之前呢,有些基础的东西还是要和大家普及一下的.如果你已经对Vue.js有所了解,那请点击 配置步骤 跳转到配置环境的阅读,否则,请耐心看完看完. 首先,介绍一下Vue.js的概念,他是干啥的呢?一定要配置vue的运行环境吗?   如上述Vue.js不是个全能的框架,因为他

  • vue环境搭建简单教程

    vue环境搭建简单教程

    要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. ①安装nodejs https://nodejs.org 下载nodejs,(lts)安装的时候,点击同意,一路next就可以. 会自带一个npm(npm是个包管理器,有啥用?是个仓库,需要用到啥 直接npm install packageName就可以了) 测试: ②安装cnpm(淘宝镜像,) npm install -g cnpm --registry=

  • 详解vue.js 开发环境搭建最简单攻略

    详解vue.js 开发环境搭建最简单攻略

    做为一名学习路上的小白,起初就对 vue.js 有着莫名的好感,知道 vue.js 也能实现 angular.js 的双向绑定等一些功能后,妥妥的先把 angular.js 和 node.js 丢到后面再去学, 看了看 vue 文档,首先要搭建一个开发环境,因为自己太小白,看了一些搭建开发环境的博客,表示专业术语太多依然还是一脸懵逼. 具体流程大概如下: 很难理解?没关系,我也没理解,跟着操作就行了,我是window系统. 1.安装node.js 起初是很不理解的,我学 vue.js 还要掌握

  • Vue新手指南之环境搭建及入门

    Vue新手指南之环境搭建及入门

    目录 初始Vue 搭建Vue开发环境 创建Vue实例 Vue模板语法 Vue数据绑定 el-data的两种写法 MVVM模型 Vue数据代理 Vue中的事件处理 总结 Vue官网:https://cn.vuejs.org 初始Vue 什么是Vue? 一套用于构建用户界面的渐进式JavaScript框架 Vue可以自底向上逐层的应用 简单应用:只需要一个轻量小巧的核心库 复杂使用:可以引入各式各样的Vue插件 Vue的特点: 1.组件化模式,提高代码复用率,更好维护代码 2.声明式编码:无需直接操

  • Vue2.0 从零开始_环境搭建操作步骤

    Vue2.0 从零开始_环境搭建操作步骤

    简要:继项目空闲后,开始着手vue的学习;为此向大家分享其中的艰辛和搭建办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一.什么是VUE? 是一种node.js框架,特点如下: 1.数据绑定 (特性:双向绑定:一旦发生变化,Dom节点实时更新:PS:尽量抛弃JQ,次特点已经可以解决很多特效等问题) 2.组件化(比如:乐高积木一样通过互相引用而组装起来) 二.开发环境 三.环境搭建 1. 包管理器安装 (1) Homebrew安装 (mac 环境,win无法安装)

  • Vue Vuex搭建vuex环境及vuex求和案例分享

    Vue Vuex搭建vuex环境及vuex求和案例分享

    目录 Vuex介绍 概念 何时使用 多个组件需要共享数据时 求和案例–纯vue版 搭建vuex环境 求和案例–vuex版 一些疑惑和问题 Vuex介绍 概念 在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读写),也是一种组件间通信的方式,且适用于任意组件间通信 何时使用 多个组件需要共享数据时 求和案例–纯vue版 新建 Count.vue 组件,并在 App.vue 中注册引用 <template>   <div&g

随机推荐