六月份在上一家公司提出离职,本意想着学习半年去考研,由于手续流程办理的繁琐复杂,离职路上格外煎熬,被真香打脸,无奈偏偏为五斗米折了腰,考研的事推到明年吧,离职证明刚下来,去了新的公司工作,接触新的项目,需要学习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 为项目名】
待执行完毕,填写基础信息(内容如下)
其中should we run npm install.... (这句话是在问是否在工程创建后就去跑 npm 安装依赖 这里面有几个选项 本人选最后一个 稍后自己安装依赖)继续等待下载完毕。
待执行完毕cmd命令在项目文件目录中执行:cnpm install --by=npm 命令安装依赖,依赖安装完成目录中会出现node_modules文件夹(安装依赖的位置)
随后进入文件夹 执行运行命令 npm run dev 运行。
使用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,然后重启
配置vscode环境并导入项目运行
点击Ctrl + Shit + X打开插件扩展窗口,同上,下载vetur(高亮显示)插件并安装,下载eslint(错误检测)插件并安装(若出现卡住时可重启,换个网号的地方安装)
随后直接文件->打开文件夹 导入项目,Ctrl+shift+Y打开控制台,在控制台选择终端,输入npm install添加包依赖 ,若添加时间过长可重新执行cnpm install --by=npm 命令安装依赖。
若安装过程报错,再执行'npm cache clean --force'清缓存再安装,反复几次后,安装成功。
最后执行运行命令 npm run dev 运行。
(本人添加依赖时出现各种不同错误,发现可能是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