时间2019.9月

1. 安装 nodeJS; 安装VScode

安装好nodeJS之后,默认会安装好npm

测试 nodeJS 和npm是否可以执行

node -v
npm -v

1.1 VScode 相关插件安装

ESLint 1.9.1;  LiveServer 5.6.1 (2019.9)  open in browser 2.0.0 ;   Vetur 0.22.3

格式化代码插件 : Prettier-Code formatter 需要有简单的配置操作 "editor.formatOnSave": true   请baidu

vue代码提示插件:搜索 vue-snippets  或 Vue 2 Snippets  参考之

vue-beautify 2.04 发现上面不少插件版本升级了。2020.3.13

2. 改变nodeJS原有的环境变量,即改变nodeJS全局安装模块的默认目录, 便于管理

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache"D:\Program Files\nodejs\node_cache"

完成后可以在文件夹中看到相应名字的文件夹 参考

2.1  在系统环境变量添加NODE_PATH,输入路径为之前指定的目录: D:\Program Files\nodejs\node_global, 作用是使nodeJS引擎可以找到需要的模块

2.2  以后当执行 npm install xxx -g 安装全局模块时,JS模块会安装到这个位置

3. 安装cnpm

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

3.1  在系统变量 path 里设置 2步骤中的路径, 因为cnpm会被安装到D:\Program Files\nodejs\node_global下,以便 快速执行cnpm

检查cnpm是否安装

cnpm -v

4. 安装 Vue模块 和 vue-cli

npm install -g vue //这里选择全局安装模块
npm install -g vue-cli //cnpm 也可以, 当然Vue的官方手册说,新手不建议直接使用所谓的脚手架方式搭建vue应用目录

4.1 检查所安装vue的版本   vue -V //是大写的V

4.2 最纯粹Vue学习环境

5. 初始化Vue工程 参考  (怎样在服务器端运行项目)

vue init webpack projectName //可以将webpack改成 webpack-simple试试,可以帮助理解这个参数的作用,不知道可以baidu

5.1 安装项目依赖和运行项目

cd projectName   //进入文件目录
npm install //初始化安装依赖
npm run dev  //运行,在浏览器打开http://localhost:8080,则可以看到欢迎页了。

tip

快速搭建vue项目

tip1. 安装淘宝npm

npm install -g cnpm –-registry=https://registry.npm.taobao.org   //同上

修改npm的registry为淘宝镜像 有3种方式 参考

npm config set registry https://registry.npm.taobao.org //改成淘宝镜像
npm info underscore (如果上面配置正确这个命令会有字符串response)
//不想用他们的,再设置回原来的就可以了:
npm config set registry https://registry.npmjs.org

检查npm安装镜像源

npm config get registry

tip2:如何更新npm至最新版本

npm install npm @latest -g //可以更新npm至最新版本
其中 @ 符号后面可以添加你想更新到的版本号。

tip3: 要使用 <style lang="sass"> 请安装组件

npm install sass-loader node-sass vue-style-loader --D

其他

vue-loader@>=10.0, simply update vue-template-compiler

直接删除掉D:\Program Files\nodejs\node_global 下的module,然后,重新安装 vue

VSCode 设置 vue 文件快速模板

就类似在vscode里面新建 Xxx.html 文件, 然后 按 tab键会快速插入预定义模板一样

入口

参考

Vue+VSCode开发环境搭建的更多相关文章

  1. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  2. vue的开发环境搭建命令加图解

    vue的开发环境的搭建 不管什么软件我们都要去官网下载安装,这是作为专业程序员的安全意识. 1.安装node.js 官方下载的页面:点击这里 大约展示的页面是这样子的!我们演示是windows 64位 ...

  3. 应用一:Vue之开发环境搭建

    简单分享下vue项目的开发环境搭建流程~ 1.安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现,下载地址:https://nodejs.org/en/.安装完成之后以管理员身份 ...

  4. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  5. Electron+Vue+ElementUI开发环境搭建

    Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...

  6. vue.js开发环境搭建

    1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...

  7. 【vue基础学习】vue.js开发环境搭建

    1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...

  8. vue.js 开发环境搭建

    1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...

  9. Vue.js开发环境搭建的介绍

    包含了最基础的Vue.js的框架,包含了打包工具和测试工具,开发调试的最基本的服务器,不需要关注细节,只需关注Vuejs对项目的实现 npm在国内的网络使用较慢,所以推荐下载安装淘宝的镜像 1: 2: ...

随机推荐

  1. [转载] Ubuntu上Firefox字体太小--高分屏背锅

    版权声明:本文为CSDN博主「mythinker2」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/myth ...

  2. libfacedetection环境配置

    E:\Opencv\libfacedetection_install1\include E:\Opencv\libfacedetection_install1\lib libfacedetect-x6 ...

  3. 【linux】gitlab 的安装以及数据迁移

    一 .安装; 1  下载相应版本rpm包并安装 https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/ wget https://mirrors ...

  4. [Feature] Final pipeline: custom transformers

    有视频:https://www.youtube.com/watch?v=BFaadIqWlAg 有代码:https://github.com/jem1031/pandas-pipelines-cust ...

  5. MyBatis-Spring项目

    使用Spring IoC可以有效管理各类Java资源,达到即插即拔功能:通过AOP框架,数据库事务可以委托给Spring处理,消除很大一部分的事务代码,配合MyBatis的高灵活.可配置.可优化SQL ...

  6. LeetCode_387. First Unique Character in a String

    387. First Unique Character in a String Easy Given a string, find the first non-repeating character ...

  7. LeetCode_344. Reverse String

    344. Reverse String Easy Write a function that reverses a string. The input string is given as an ar ...

  8. 【Leetcode_easy】908. Smallest Range I

    problem 908. Smallest Range I solution: class Solution { public: int smallestRangeI(vector<int> ...

  9. Python3 IO编程之文件读写

    读写文件是最常见的IO操作.python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一个,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序终结操作磁盘, ...

  10. 克隆指定的分支:git clone -b 分支名仓库地址

    克隆指定的分支:git clone -b 分支名仓库地址 git clone -b 分支名 仓库地址 -b 是在克隆的时候制定一个分支