构建一个简单的vue项目&使用VsCode运行Vue项目

六月份在上一家公司提出离职,本意想着学习半年去考研,由于手续流程办理的繁琐复杂,离职路上格外煎熬,被真香打脸,无奈偏偏为五斗米折了腰,考研的事推到明年吧,离职证明刚下来,去了新的公司工作,接触新的项目,需要学习vue及springoot相关知识。现使用webpack搭建vue空白项目,并使用vscode终端运行vue项目。

创建一个vue项目

配置相关开发环境

安装node.js_官方网站下载:https://nodejs.org/en/
具体安装步骤:
选择符合操作系统的安装包,下载完成并傻瓜式安装(一直下一步),注意修改安装路径,直到finish结束。
win+R输入cmd,分别输入命令:node -v和npm -v回车查看版本号,判断是否安装成功。
因为默认此后的安装路径默认在c盘占用内存,此时需要配置npm安装全局模块时的路径和缓存cache的路径:
在你的node.js安装目录下新建两个文件夹 node_global和node_cache,然后在cmd下执行:
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
注意:“D:\Program Files\nodejs\”此处为你的安装路径。
随后打开环境变量,在系统变量中添加NODE_PATH,路径为“D:\nodejs\node_global”自己的node_global路径;并在path后添加“;D:\nodejs\“自己的nodejs安装路径,保存。
更改注册表:在cmd中输入npm config set registry https://registry.npm.taobao.org。执行此命令后,每次执行npm install,都会默认从淘宝镜像搜索并下载包。
安装vue,打开cmd命令,执行npm install --global vue-cli 全局安装,安装完成后在global目录输入cmd 再输入vue -V,出现Vue版本号,(若未设置全局变量,在全局变量中的path加上你vue.cmd的路径再次尝试)验证Vue 安装成功。

创建基于webpack模板的新项目

在自定位置新建文件夹。
cmd命令打开文件夹【d:~cd 文件夹名~...】
cmd命令上输入vue init webpack project01 【project01 为项目名】
待执行完毕,填写基础信息(内容如下)


image.png

其中should we run npm install.... (这句话是在问是否在工程创建后就去跑 npm 安装依赖 这里面有几个选项 本人选最后一个 稍后自己安装依赖)继续等待下载完毕。


image.png

待执行完毕cmd命令在项目文件目录中执行:cnpm install --by=npm 命令安装依赖,依赖安装完成目录中会出现node_modules文件夹(安装依赖的位置)
image.png

随后进入文件夹 执行运行命令 npm run dev 运行。
image.png

使用VsCode运行Vue项目

下载vscode并配置语言

下载并安装vscode软件,运行vscode程序,按Ctrl + Shift + P打开命令板(失效多半是因为搜狗繁体切换快捷键冲突,关闭此快捷键ok,若还是失效就按ctrl+p,然后输入>),然后开始键入“display”以过滤并显示Configure Display Language命令
选择Configure Display Language,按Enter键,会打开locale.json文件,其默认值位当前使用的语言,为“en”。将“en”改为“zh-CN”,然后ctrl +S 保存locale.json并重新启动VS Code以使用新的显示语言。
点击扩展视图,搜索语言包 category:"Language Packs"。选择中文(简体),点击Install,然后重启


image.png
配置vscode环境并导入项目运行

点击Ctrl + Shit + X打开插件扩展窗口,同上,下载vetur(高亮显示)插件并安装,下载eslint(错误检测)插件并安装(若出现卡住时可重启,换个网号的地方安装)
随后直接文件->打开文件夹 导入项目,Ctrl+shift+Y打开控制台,在控制台选择终端,输入npm install添加包依赖 ,若添加时间过长可重新执行cnpm install --by=npm 命令安装依赖。
若安装过程报错,再执行'npm cache clean --force'清缓存再安装,反复几次后,安装成功。
最后执行运行命令 npm run dev 运行。


image.png

(本人添加依赖时出现各种不同错误,发现可能是webpack版本过新导致的问题,把webpack版本更替成低版本后程序运行成功)

高版本webpack更换为低版本

在全局下安装:npm install webpack -g
先执行在全局下删除 :cmd命令 npm uninstall webpack -g
将项目目录下的node-modules一起删除,有些残留文件影响结果。
随后安装指定版本:npm install webpack@<版本号> -g ,例:npm install webpack@3.4.1 -g
查看webpack 版本信息
npm info webpack
如果要使用webpack开发工具,要单独安装 webpack-dev-server
npm install webpack-dev-server --save-dev

注:
--save:将保存配置信息到pacjage.json的dependencies节点中。
--save-dev:将保存配置信息到pacjage.json的devDependencies节点中。
dependencies:运行时的依赖,发布后,即生产环境下还需要用的模块
devDependencies:开发时的依赖。里面的模块是开发时用的,发布时用不到它。

2019.7.19

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349