0.312019.05.09 11:53:43字数 1,073阅读 19,627        https://www.jianshu.com/p/a494417def99?utm_source=desktop&utm_medium=timeline

一、开发工具

Visual Studio Code

二、环境搭建

  1. vue推荐开发环境:
    Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言
    npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(http://npm.taobao.org/
    $ npm install -g cnpm –registry=https://registry.npm.taobao.org
    webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
    vue-cli: 用户生成Vue工程模板
  2. 安装node.js
    官网:http://nodejs.cn/
    从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了。
    安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功。
 
node.js测试
  1. npm包管理器,是集成在node中的,所以,直接输入 npm -v,显示出npm的版本信息。

     
    npm
  1. 查看全局包位置:
  2. C:\Users\Administrator>npm root -g
  3. 查看包的依赖关系
  4. C:\Users\Administrator>npm view npm dependencies
  5. 查看npm基本配置命令:
  6. C:\Users\Administrator>npm config list
  1. 安装cnpm(可选)
    由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm。
    在命令行中输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然后等待,安装完成如下。
 
安装cnpm

完成之后,我们就可以用cnpm代替npm来安装依赖包了。

  1. 安装vue-cli脚手架构建工具

在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。

  1. # 全局安装vue-cli
  2. C:\Users\Administrator>npm install -g vue-cli
  3. 或:
  4. C:\Users\Administrator>npm install --global vue-cli
  1. 用vue-cli构建项目
    要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。
  1. # 建一个基于 webpack 模板的新项目
  2. Webpack为构建,vue-project为项目名
  3. D:\>vue init webpack vue-project
 
用vue-cli构建项目

如果出现乱码请改变命令行窗口编码格式:
D:>chcp 65001

解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中vue-project是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中:

  1. D:\>cd vue-project
  2. D:\vue-project>
 
查看目录结构
  1. 安装项目所需的依赖
    要安装依赖包,首先cd到项目文件夹(vue-project文件夹),然后运行命令 cnpm install ,等待安装。

     
    安装项目所需的依赖

安装完成之后,会在我们的项目目录vue-project文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。

 
vue-project文件夹
  1. 运行项目
    在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

     
    运行项目

这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。

 
结果展现

三、安装配置vscode

  1. VSCode设置中文语言环境
    使用快捷键【Ctrl+Shift+P】
    在弹出的搜索框中输入【configure language】,然后选择搜索出来的【Configure Display Language】,如下图:

     
    设置语言环境
     
    设置语言环境
     
    安装简体中文
  2. Visual Studio Code编辑器在Windows上安装比较简单,直接setup.exe。安装好后首次启动配置插件,插件配置必须联网,从网上下载。如下图点击左侧扩展:

     
    扩展
  3. 配置
    文件->首选项->设置

  1. {
  2. "workbench.iconTheme": "vscode-icons",
  3. "editor.fontSize": 20,
  4. "editor.renderIndentGuides": false,
  5. "files.autoSave": "afterDelay",
  6. "liveSassCompile.settings.formats":[
  7. {
  8. "format": "expanded",
  9. "extensionName": ".css",
  10. "savePath": "/css"
  11. },
  12. {
  13. "extensionName": ".min.css",
  14. "format": "compressed",
  15. "savePath": "/css"
  16. }
  17. ],
  18. "liveSassCompile.settings.excludeList": [
  19. "**/node_modules/**",
  20. ".vscode/**"
  21. ],
  22. "liveSassCompile.settings.generateMap": true,
  23. "easysass.formats": [
  24. {
  25. "format": "expanded",
  26. "extension": ".css"
  27. },
  28. {
  29. "format": "compressed",
  30. "extension": ".min.css"
  31. }
  32. ],
  33. "easysass.targetDir": "./css/",
  34. "background.customImages": [
  35. "file:///D://222.png"
  36. ],
  37. "background.useDefault": false,
  38. "background.style": {
  39. "content": "''",
  40. "pointer-events": "none",
  41. "position": "absolute",
  42. "z-index": "99999",
  43. "width": "102%",
  44. "height": "100%",
  45. "background-position": "0%",
  46. "background-repeat": "no-repeat",
  47. "opacity": 0.3
  48. },
  49. "editor.quickSuggestions": {
  50. "strings": true
  51. },
  52. "cssrem.rootFontSize": 12,
  53. "cssrem.autoRemovePrefixZero": false,
  54. "cssrem.fixedDigits": 3,
  55. "beautify.language": {
  56. "js": {
  57. "type": [
  58. "javascript",
  59. "json"
  60. ],
  61. "filename": [
  62. ".jshintrc",
  63. ".jsbeautify"
  64. ]
  65. },
  66. "css": [
  67. "css",
  68. "scss"
  69. ],
  70. "html": [
  71. "htm",
  72. "vue",
  73. "html"
  74. ]
  75. },
  76. "workbench.colorTheme": "Dark-Dracula",
  77. "vetur.format.defaultFormatter.html": "js-beautify-html"
  78. }

二、Vue-cli 项目目录解析

  1. |-- build // 项目构建(webpack)相关代码
  2. | |-- build.js // 生产环境构建代码
  3. | |-- check-version.js // 检查node、npm等版本
  4. | |-- dev-client.js // 热重载相关
  5. | |-- dev-server.js // 构建本地服务器
  6. | |-- utils.js // 构建工具相关
  7. | |-- webpack.base.conf.js // webpack基础配置
  8. | |-- webpack.dev.conf.js // webpack开发环境配置
  9. | |-- webpack.prod.conf.js // webpack生产环境配置
  10. |-- config // 项目开发环境配置
  11. | |-- dev.env.js // 开发环境变量
  12. | |-- index.js // 项目一些配置变量
  13. | |-- prod.env.js // 生产环境变量
  14. | |-- test.env.js // 测试环境变量
  15. |-- src // 源码目录
  16. | |-- assets // 资源目录
  17. | |-- components // vue公共组件
  18. | |-- store // vuex的状态管理
  19. | |-- App.vue // 页面入口文件
  20. | |-- main.js // 程序入口文件,加载各种公共组件
  21. |-- static // 静态文件,比如一些图片,json数据等
  22. | |-- data // 数据
  23. |-- .babelrc // ES6语法编译配置
  24. |-- .editorconfig // 定义代码格式
  25. |-- .gitignore // git上传需要忽略的文件格式
  26. | |-- .postcssrc.js // 通过JS插件装换样式的工具
  27. |-- README.md // 项目说明
  28. |-- favicon.ico
  29. |-- index.html // 入口页面
  30. |-- package.json // 项目基本信息

三、常见问题

  1. Eslint总是报错‘[vue/no-parsing-error] Parsing error: x-invalid-end-tag.’
    关闭eslint的检查

     
    Eslint总是报错

    vetur.validation.template

     
    解决方法

常见错误:

  1. ! chromedriver@2.46.0 install: node install.js
  1. D:\vue-project> npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

 

VUE开发--环境配置(一)(转)的更多相关文章

  1. weex和vue开发环境配置详解(配置系统变量等等)

    本文详细讲解如何搭建weex和vue开发环境 安装java 现在java安装包,网上的安装包都是国外的,很难下载下来 就用这个链接下载,亲测无毒,http://www.wmzhe.com/soft-3 ...

  2. vue开发环境配置跨域,一步到位

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...

  3. vue开发环境配置

    一.开发工具 Visual Studio Code 二.环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nod ...

  4. vue开发环境和生产环境配置

    开发环境配置 一般情况下开发环境是会跨域的,所以我们只需要在跨域的位置配置即可.进入config/index.js,在proxyTable对象里面添加代码,如下 '/api': { target: ' ...

  5. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  6. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

  7. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  8. 【VUE】Mac下vue 开发环境搭建,以及目录结构

    1 安装Node.js 参看 node.js环境安装   http://www.cnblogs.com/richerdyoung/p/7265786.html 2 安装淘宝镜像 npm install ...

  9. 面试官:自己搭建过vue开发环境吗?

    开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...

随机推荐

  1. Centos 6 DNS 配置 解决 Unknown host

    测试服务器Maven 打包时遇到了如下的错误 maven.aliyun.com: Name or service not known: Unknown host maven.aliyun.com: N ...

  2. CobaltStrike逆向学习系列(10):TeamServer 启动流程分析

    这是[信安成长计划]的第 10 篇文章 关注微信公众号[信安成长计划] 0x00 目录 0x01 基本校验与解析 0x02 初始化 0x03 启动 Listeners 在之前的分析中,都是针对 Cob ...

  3. 【windows 操作系统】异步

    转载:https://cloud.tencent.com/developer/article/1744660 二.异步与多线程 1)基本概念 1. 并发:在操作系统中,是指一个时间段中有几个程序都处于 ...

  4. C# 逆变(Contravariance)/协变(Covariance) - 个人的理解

    逆变(Contravariance)/协变(Covariance) 1. 基本概念 官方: 协变和逆变都是术语,前者指能够使用比原始指定的派生类型的派生程度更大(更具体的)的类型,后者指能够使用比原始 ...

  5. Java基础--集合解析-ArrayList

    1.ArrayList中添加,获取,删除元素: 2.ArrayList中是否包含某个元素: 3.ArrayList中根据索引将元素数值改变(替换): 4.ArrayList中查看(判断)元素的索引: ...

  6. 基于Netty的一个WeoSocket通信服务器与客户端代码(非JS代码)

    基于Netty的一个WeoSocket通信服务器与客户端代码(非JS代码) 咳咳,在这里呢,小轩就不多说什么是WebSocket的,还有呢,小轩为什么不给出JS-Client代码?网上太多代码可以用了 ...

  7. Scrapy:用cmdline运行爬虫后导致主程序也结束——CrawlerProcesser

    学习自: Scrapy官方文档--CrawlerRunner相关 解决django或者其他线程中调用scrapy报ReactorNotRestartable的错误 - liuxianglong - 博 ...

  8. FoveaBox:细节差别,另一种DenseBox+FPN的Anchor-free方案 | IEEE TIP 2020

    作为与FCOS和FSAF同期的Anchor-free论文,FoveaBox在整体结构上也是基于DenseBox加FPN的策略,主要差别在于FoveaBox只使用目标中心区域进行预测且回归预测的是归一化 ...

  9. FaE:基于符号知识的适应性和可解释的神经记忆

    原创作者 | 朱林 论文解读: Facts as Experts: Adaptable and Interpretable Neural Memory over Symbolic Knowledge ...

  10. 微信小程序实现图表展示

    开发可参考以下链接 点击有道云链接 小程序柱状图展示 [单元目标] 掌握小程序柱状图展示 [教学内容] 1.1 掌握组件导入 在miniprogram下的utils文件夹(若没有就新建一个)下,新建w ...