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
查看全局包位置:
C:\Users\Administrator>npm root -g
查看包的依赖关系 :
C:\Users\Administrator>npm view npm dependencies
查看npm基本配置命令:
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 ,然后等待安装完成。

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

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

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

D:\>cd vue-project
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. 配置
    文件->首选项->设置

{
"workbench.iconTheme": "vscode-icons",
"editor.fontSize": 20,
"editor.renderIndentGuides": false,
"files.autoSave": "afterDelay",
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
{
"extensionName": ".min.css",
"format": "compressed",
"savePath": "/css"
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"easysass.formats": [
{
"format": "expanded",
"extension": ".css"
},
{
"format": "compressed",
"extension": ".min.css"
}
],
"easysass.targetDir": "./css/",
"background.customImages": [
"file:///D://222.png"
],
"background.useDefault": false,
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"z-index": "99999",
"width": "102%",
"height": "100%",
"background-position": "0%",
"background-repeat": "no-repeat",
"opacity": 0.3
},
"editor.quickSuggestions": {
"strings": true
},
"cssrem.rootFontSize": 12,
"cssrem.autoRemovePrefixZero": false,
"cssrem.fixedDigits": 3,
"beautify.language": {
"js": {
"type": [
"javascript",
"json"
],
"filename": [
".jshintrc",
".jsbeautify"
]
},
"css": [
"css",
"scss"
],
"html": [
"htm",
"vue",
"html"
]
},
"workbench.colorTheme": "Dark-Dracula",
"vetur.format.defaultFormatter.html": "js-beautify-html"
}

二、Vue-cli 项目目录解析

|-- build                            // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- assets // 资源目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些图片,json数据等
| |-- data // 数据
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
| |-- .postcssrc.js // 通过JS插件装换样式的工具
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- 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
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. 2020年的第一天-我的IDEA出现This license ... has been cancelled

    IDEA激活在1月3日的早上,激活码被取消了.提示:This license ... has been cancelled. 经过查询.解决方法教程无非是. ¥%--&*(激活码... 210 ...

  2. 私有化轻量级持续集成部署方案--07-私有NPM仓库-Verdaccio

    提示:本系列笔记全部存在于 Github, 可以直接在 Github 查看全部笔记 对于个人来说,私有NPM仓库 作用性基本很小,但是对于企业,私有NPM仓库 可以保护代码暴露,具有很大的意义. 也是 ...

  3. idea 自定义toString

    实现功能: 1.自定义json格式 2.字符及时间类型添加null判断 3.时间进行格式化 步骤: 1.alt+insert-----toString---setting----templates 2 ...

  4. ansible中的hostvars

    首先来看一个例子:假设我想得到主机IP为172.25.250.9的完全限定域名(FQDN),但是我无法登录该主机,那么就可以用本机里面的hostvars魔法变量(后面会分享我对魔法这个词的理解)这个字 ...

  5. PentestBOX教程

    0x01 Pentest BOX Pentest Box:渗透测试盒子,是一款Windows平台下预配置的便携式开源渗透测试环境,而它也是著名黑客Kapustkiy常用的工具之一.这里集成的大都是Li ...

  6. jQuery下载安装使用教程

    一:下载jQuery 下载链接:jQuery官网 中文文档:jQuery AP中文文档 1.jQuery版本 1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增.因此一般项目来说 ...

  7. c# $ @特殊字符

    c# @ 停止字符串中的转义字符,让字符串内的转义字符当正常字符输入. 因此,如果你需要类似"所见所得"效果的赋值,逐字字符串赋值方式会是你的首选!此外,需要注意的是,当使用符号 ...

  8. 小白都能看懂的tcp三次握手

    众所周知,TCP在建立连接时需要经过三次握手.许多初学者经常对这个过程感到混乱:SYN是干什么的,怎么一会儿是1一会儿是0?怎么既有大写的ACK又有小写的ack?为什么ACK在第二次握手才开始出现?初 ...

  9. Python:pandas(三)——DataFrame

    官方文档:pandas之DataFrame 1.构造函数 用法 pandas.DataFrame( data=None, index=None, columns=None, dtype=None, ) ...

  10. Spring Cloud Gateway 远程代码执行漏洞(CVE-2022-22947)

    参考: https://y4er.com/post/cve-2022-22947-springcloud-gateway-spel-rce-echo-responsehttps://cloud.spr ...