环境准备:

  1、安装Node&npm,只是为了要Node.js的环境https://nodejs.org/en/download/

  2、安装完成Node以及npm之后,就可以用npm config list 查看npm基本配置信息了

  3、将npm镜像替换成淘宝镜像 npm config set metrics-registry  https://registry.npm.taobao.org

  4、某些情况下安装node-sass时候特别慢,需要添加一个npm的镜像包 npm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass

  5、某些情况下安装chromedriver时候特别慢,需要添加一个npm的镜像包 npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

  6、安装yarn     yarn install

  7、npm install -g vue-cli 安装vuecli (用于使用vue init webpack my-project 命令创建模版项目)

  8、npm-check-updates 更新npm包工具

  9、npm uninstall npm -g  卸载npm

npm使用

npm init   初始化项目添加package.json文件  package.json存放了npm的基本信息,包括,依赖包(开发与生产环境依赖包),项目执行的命令等(进入项目目录,确定已有package.json,没有就npm init 创建 Note:可能会遇到Sorry, name can no longer contain capital letters.意思是项目名称不能包含大写字母)

npm  i     (npm install 缩写)安装package.json文件中配置的开发环境依赖包

npm i  [name] [g] --save-dev 安装第三方依赖包

name    包名

g           全局安装

--save    将保存配置信息至package.json

-dev       保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点

npm uninstall <name> [-g] [--save-dev]  卸载依赖包

npm update [--save-dev] 更新全部插件

npm list  查看当前目录已安装插件

  从vue下载一个模板之后,使用npm run dev,放问本地8080端口,就可以看到以下页面,就证明环境正确:

VSCode 插件

Auto Close Tag 自动补全html标签

Auto Rename Tag 同步更改html尾标签

ESLint ESlint语法提示

HTML CSS Support css语法提示

Path Autocomplete 文件自动路径提示

vetur

Vue浏览器调试工具

Vue.js devtools

相关知识点

vue:https://cn.vuejs.org/v2/guide/

vuex:https://vuex.vuejs.org/zh-cn/

vue-rooter:http://router.vuejs.org/zh-cn/

ES 6:http://es6.ruanyifeng.com/?search=%E7%AE%AD%E5%A4%B4&x=0&y=0

webpack:https://doc.webpack-china.org/

前端Vue准备工作的更多相关文章

  1. Web前端-Vue.js必备框架(五)

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  2. Web前端-Vue.js必备框架(四)

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  3. Web前端-Vue.js必备框架(三)

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  4. Web前端-Vue.js必备框架(二)

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  5. Web前端-Vue.js必备框架(一)

    Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝

    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...

  7. 前端Vue知识小白

    感觉是已好久没写博文了.今日难得有时间,便写一篇文章.此文章是关于前端知识的,我本身是后端,因工作或其他需要,便学习了前端Vue.此文章是在菜鸟教程上学习的.那么下面进入正文! 首先,Vue.js是一 ...

  8. 前端Vue中常用rules校验规则

    前提 在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function valid ...

  9. 前端vue实现pdf文件的在线预览

    3.前端vue实现pdf文件的在线预览 我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求 如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...

随机推荐

  1. 【1封新邀请】想跟谷歌、七牛、kyligence等大佬面对面的交流吗?

    2020年1月4日-5日,"ECUG Con 2020"大会将于杭州举行.本次大会以"ECUG For Future"为主题,围绕五大技术主题,邀请到来自七牛云 ...

  2. wpf键盘

    一.键盘类和键盘事件 WPF提供了基础的键盘类(System.Input.Keyboard类),该类提供与键盘相关的事件.方法和属性,这些事件.方法和属性提供有关键盘状态的信息.Keyboard的事件 ...

  3. day 28-1 元类

    元类 元类的用途:自定义元类控制类的创建行为及类的实例化行为 Python 中一切皆为对象. 一切接对象,对象可以怎么用呢? 1.都可以被引用,x=obj 2.都可以当作函数的参数传入 3.都可以当作 ...

  4. [Android逆向]APK反编译与回编译

    一.先查壳,再反编译看验证首先打开.apk文件==>反编译apk(dex/配置文件/资源文件(apk反编译失败)>修改关键文件实现自己的目的>重新打包签名(无法重新打包)==> ...

  5. 二分查询-leetcode

    二分查找-leetcode /** *  * 278. First Bad Version *  * You are a product manager and currently leading a ...

  6. Java基础语法04面向对象上-类-属性-方法-可变参数-重载-递归-对象数组

    类 面向对象是一种思想,一般指将事务的属性与方法抽出总结为模板(类/class),处理事务时通过类创建/new出对象由对象的功能/方法去完成所要计算处理的事情. 面向过程:POP:以过程,步骤为主,考 ...

  7. VM虚拟机与本地网络互通配置

    一.设置虚拟机网络 1. 查看虚拟机网络NAT设置(VMnet8) 2. 设置虚拟机网络适配器为NAT模式 三.设置本机VMnet8网络属性 三.设置Linux网络属性 1. 查看 ip addr 2 ...

  8. 如何让create-react-app锦上添花,满足实际需求?

    目录 前端部分 后端部分 create-react-app 是 React 官方为我们提供的一个单页应用脚手架,基于 webpack 配置了相关功能,babel. 图片处理.热加载.css 模块化.c ...

  9. MySQL 是如何处理死锁的

    MySQL(InnoDB)是如何处理死锁的 一.什么是死锁 官方定义如下:两个事务都持有对方需要的锁,并且在等待对方释放,并且双方都不会释放自己的锁. 这个就好比你有一个人质,对方有一个人质,你们俩去 ...

  10. Axure导出的原型无法在谷歌浏览器浏览

    1.下载crx后缀的文件. 2.修改crx后缀名为rar的压缩文件 3.解压刚才的rar文件 4.打开谷歌浏览器右上角的三个点 更多工具==>扩展程序 选择刚才的解压文件夹. 上面的图表示安装成 ...