Vue环境搭建+VsCode+Win10
如果觉得对你有帮助,能否点个赞或关个注,以示鼓励笔者呢?!博客目录 | 先点这里
目录
- 一、下载Node.js
- 二、修改存放目录
- 三、添加环境变量
- 四、安装淘宝镜像
- 五、安装Vue-cli
- 六、项目创建
- 创建方式一:图形化界面创建
- 创建方式二:命令行创建
- 安装element-ui
- 关于地址栏的#号
- vue-cli目录解析
- 七、VS插件安装
- 八、新建.vue时添加默认内容
一、下载Node.js
官方网站:传送门(点我)
这里建议勾上(会自动帮你创建一个NodeJs的环境变量)
默认是添加了一个环境变量(你的安装目录):
D:EnvironmentsH5NodeJs
下载后一路next就行,安装目录我放在D盘下
安装完成后,输入以下命令查看是否安装成功
npm是node.js的包管理工具,用来安装各种node.js的扩展
node -v
npm -v
为了让我们之后下载的东西不存在C盘,默认是放在
C:UsersadministratorAppDataRoaming
pm
现在我们来修改存放目录
二、修改存放目录
首先去你想要存放的地方创建两个空文件夹,用于存放之后下载的依赖等资源**(不修改的话以后的下载都给你弄C盘去了)**,如我这里创建了
然后在命令行中设置
设置缓存文件夹(下面是我的目录演示,引号后面改为你自己的Node目录)
npm config set cache "D:EnvironmentsH5NodeJs ode_cache"
设置全局模块存放路径
npm config set prefix "D:EnvironmentsH5NodeJs ode_global"
设置完成后可执行以下命令查看是否成功
npm config get cache npm config get prefix
若显示路径已被更改(如下图),则缓存、全局模块存放路径就修改成功。
三、添加环境变量
环境变量的作用是给系统提供一个快捷方式,让在任何目录下都可以使用对应的工具
在我的电脑右键属性 → o →高级系统设置 → o →环境变量
在系统变量中找到Path
四、安装淘宝镜像
由于某些原因,国外的网速有时候不稳定,所以需要安装淘宝镜像
如果安装失败,切记使用管理员权限打开命令行
npm install -g cnpm --registry=https://registry.npm.taobao.org
执行下列命令修改,不然创建项目时会很慢
npm config set registry https://registry.npm.taobao.org
执行命令看是否修改成功
npm config get registry
五、安装Vue-cli
npm install -g @vue/cli
注意,以上命令安装的是较新的版本,安装老版本请自行搜索(应该没人想用老版本吧。。)
安装成功后输入命令检查
vue -V
六、项目创建
创建方式一:图形化界面创建
前面提到之所以要使用新版本,是因为新版本支持一个命令 ,3.0以下的不支持
vue ui
更改上面的目录,工程创建目录,可将你要创建工程的位置路径复制上去,然后点击创建
一路默认就好
到这里就创建成功了,使用VsCode打开该项目,没下载的话下面有传送门,安装和QQ一样简单,不再赘述。
VsCode官方下载链接(点我)
在终端执行命令:
npm run serve
如果以上命令不成功,则执行
npm run dev
原因,这是由package.json决定的
到这个界面就完成了
启动项目的另一种方式
直接在刚刚的图形化界面启动也是可以的,这几种选择就仁者见仁智者见智了。
创建方式二:命令行创建
在你要创建工程的目录下CMD
1.输入 切记一定要是管理员权限打开命令行,不然可能会因为权限问题创建不成功
vue create 项目名
2.一路回车即可
如果这里创建项目时很慢,前面已经提到过
执行下列命令修改,不然创建项目时会很慢npm config set registry https://registry.npm.taobao.org
执行命令看是否修改成功
npm config get registry
最后:
在终端执行命令:
npm run serve
如果以上命令不成功,则执行
npm run dev
原因,这是由package.json决定的,在图形化创建已经提到过
出现如下界面则成功
在浏览器输入
http://localhost:8080/#/
则大功告成!
安装element-ui
在当前项目下执行
npm i element-ui -S
关于地址栏的#号
大家可以发现当Vue工程创建完毕之后,默认地址是
http://localhost:8080/#/
这个#号是代表vue-router已经正常工作
当然很多人疑惑平常访问的网址很少是带#号的,这其实是两种风格,历史模式或 hash 模式
vue-cli目录解析
build 文件夹:用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库,或者配置一下 UI 库。
config 文件夹:主要存放配置文件,用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
dist 文件夹:默认 npm run build 命令打包生成的静态资源文件,用于生产部署。
node_modules:存放npm命令下载的开发环境和生产环境的依赖包。
src: 存放项目源码及需要引用的资源文件。
src下assets:存放项目中需要用到的资源文件,css、js、images等。
src下componets:存放vue开发中一些公共组件:header.vue、footer.vue等。
src下emit:自己配置的vue集中式事件管理机制。
src下router:vue-router vue路由的配置文件。
src下service:自己配置的vue请求后台接口方法。
src下page:存在vue页面组件的文件夹。
src下util:存放vue开发过程中一些公共的.js方法。
src下vuex:存放 vuex 为vue专门开发的状态管理器。
src下app.vue:使用标签渲染整个工程的.vue组件。
src下main.js:vue-cli工程的入口文件。
index.html:设置项目的一些meta头信息和提供
用于挂载 vue 节点。
package.json:用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。
七、VS插件安装
插件
作用
Vetur
语法错误检查,语法高亮、代码自动补全
ESLint
检测代码语法问题,与格式问题
Vetur快捷键:Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)
八、新建.vue时添加默认内容
选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,输入vue, 选择vue后,编辑器会自动打开一个名字为vue.json的文件
修改vue.json内容如下,直接复制粘贴即可
{
“Print to console”: {
“prefix”: “vue”,
“body”: [
“”,
"$0",
" “,
"“,
"
“,
“
",
“”,
“$2”
],
“description”: “Log output to console”
}
}新建.vue文件,输入vue,按回车,页面结构自动生成
Vue环境搭建+VsCode+Win10相关推荐
- 【前端】Vue环境搭建+VsCode+Win10
目录 1.下载Node.js 2.修改存放目录 3.添加环境变量 4.安装淘宝镜像 5.安装Vue-cli 6.项目创建 6.1创建方式一:图形化界面创建 6.2命令行创建 6.3安装element- ...
- Vue 环境搭建(win10)
1.安装node node官网安装地址 推荐安装稳定版本(LTS)以及安装路径为系统盘(C) 查看node安装成功否 注释:以下命令使用 命令提示符(管理员)权限,win10 对user权限的限制了访 ...
- VUE环境搭建教程以及VSCODE插件Vetur和ESlint的安装配置
*此教程适用于Windows环境下 Author:Sinclair CreateDate:2018-10-09 1.安装node.js 下载地址:Download | Node.js (LTS代表 ...
- win10下caffe环境搭建: win10 + vs2013 + caffe + CUDA 7.5 + cudnn v4 + Anaconda2 (python 2.7) 目前未使用GPU
win10下caffe环境搭建: win10 + vs2013 + caffe + CUDA 7.5 + cudnn v4 + Anaconda2 (python 2.7) 目前未使用GPU 最近 ...
- WNMP环境搭建(Win10+Nginx+MySQL+PHP)
文章目录 准备工作 安装Nginx 安装PHP PHP关联Nginx 安装MySQL 一键启动.关闭(MySQL,Nginx,PHP) bat 准备工作 官网下载 Nginx.MySQL.PHP到本地 ...
- win10系统的深度学习环境搭建以win10+rtx2060+tensorflow为例/K210的win10系统的深度学习环境搭建/有无显卡均可安装
win10系统的深度学习环境搭建以win10+rtx2060+tensorflow为例 K210的win10系统的深度学习环境搭建 有无显卡均可安装 一 软件准备 1.Anaconda3 软件介绍:A ...
- nodejs + vue环境搭建
nodejs + vue环境搭建 安装nodejs 下载并安装[nodejs] 配置nodejs 安装cnpm(淘宝镜像) 安装vue vue vue-cil 测试,创建新项目 附上vue项目文件夹说 ...
- Django+Vue环境搭建
一.Django环境 1.下载Django pip install django 2.创建Django项目 django-admin startproject server #server 为项目 ...
- Vue环境搭建及入门
初始Vue Vue环境搭建 Vue模板语法 Vue数据绑定 el-data的两种写法 MVVM模型 Vue数据代理 Vue中的事件处理 Vue官网:https://cn.vuejs.org 初始Vue ...
最新文章
- r语言和python-r语言和python的详细对比
- springboot学习笔记(一)
- HDFS NameNode进程挂了并且数据也丢失了,如何进行恢复?
- sklearn 中的preprocessing数据预处理
- 在 IntelliJ IDEA 中创建基本的 Maven 多模块项目
- javascript库之Mustache库使用说明
- PHP 数组的内部实现
- 单片机串口通信学号显示_触摸屏与单片机串口通信测试
- dbgview OutputDebugString输出函数
- Atcoder 077E - guruguru(线段树+dp)
- 无密码,撤销excel工作表保护
- 2022年熔化焊接与热切割操作证考试题库及答案
- 100003字,带你解密 双11、618电商大促场景下的系统架构体系
- 计算机英语(第四版)刘艺英语单词
- 税务知识科普|开具红字发票需要收回原发票吗
- 调试python程序---pdb
- 南京2级计算机成绩查询,南京审计大学教务管理系统登录入口、成绩查询网上选课查分...
- PoweShell Win_desktop install wsl
- 【人工智能简史】第三章 第一个AI研究的黄金时代
- 软件著作权 python代码少_软件著作权源代码咋么整理?复制粘贴?out了,直接使用python啦...
热门文章
- 微信小程序搜索框样式
- 如何突破微信的支付额度限制
- Ignition Perspective Design Tips
- 乐视网php工资,乐视今天发工资了吗?没有
- 超实用迷你js判断类库介绍
- ObjectOutputStream and ObjectInputStream 序列化 transient
- Linux内核启动流程分析(二)【转】
- 荧光乳胶AIE微球QM-OH@PS-COOH/荧光高分子纳米微球AIE-PEN FPNs制备方法
- 不想“自费打工”,那就学习Python搞点赚钱副业试试
- 自家群晖开启永久免费图床,开始typora, picgo,markdown的美好生活