从C#转web前端之路记录[1]-配置环境vscode,汉化,插件,vue,vue-cli,npm

微信扫一扫,分享到朋友圈

从C#转web前端之路记录[1]-配置环境vscode,汉化,插件,vue,vue-cli,npm

安装下吧。

在本地磁盘新建个目录放项目文件,然后添加目录进去

然后安装nodejs环境,基本

http://nodejs.cn/download/

由于我是安装了vs2019后,nodejs环境装好了,我不知道目录,输入where node

输入node,然后输入 console.log(“hello”);

nodejs安装好了,接下来汉化

打开插件那个地方搜索

Chinese(Simplied) Lang

接下来重启vscode,已经中文

如果需要切换语言,按下Ctrl+Shift+P,config,点击配置显示语言,然后选择其他语言,重启。

(请先跳转到下面的

手动新建2个目录  这个地方看,我绕了一点路。

接下来,安装cnpm,这是淘宝的npm,有时候安装不了的包,在cnpm上可以安装,而且速度快点。

npm install -g cnpm –registry=https://registry.npm.taobao.org

====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========

安装webpack

当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

Vue的组件是.vue或.wxml等文件,无法被浏览器解析,需要被翻译和打包为.js文件

cnpm install webpack -g

(跳过,后面我使用的是npm install @vue-cli -g安装的)安装vue-cli

vue-cli这个构建工具大大降低了webpack的使用难度,支热更新,webpack-dev-server的支持,相当于启动了一个请求服务器。

vue-cli是脚手架,就是用配置好的模版快速搭起一个项目来,省去配置webpack的基本内容。通过

vue init 模版名 项目名

然后再有几个简单设置就建起项目了。

输入

cnpm install vue-cli -g

回车

我的是win10操作系统

C:\Users\admin\AppData\Roaming\npm\node_modules

新建vue项目

在D盘新建个ayvue文件夹

进入文件夹

然后我 vue init webpack aystu,一直没有效果,这是vue-cli 2.0的语法,抛弃吧。

算了 win+x 打开powershell管理员模式

输入  cnpm install -g @vue/cli

还是有问题

就感觉环境变量问题一样,

输入Get-ExecutionPolicy -List

Set-ExecutionPolicy RemoteSigned -Scope Process

我输入了A回车

Set-ExecutionPolicy RemoteSigned -Scope Process

试过折腾,还没用,我猜环境变量,结果路径太长加不上,默认npm安装的路径太长,我们换个地方

手动新建2个目录

这里建议你放在非C盘,因为我后面遇到权限的问题了。我后面也改成d盘了。

打开cmd设置

npm config set prefix “C:\Program Files\nodejs\node_global”

npm config set cache “C:\Program Files\nodejs\node_cache”

配置环境变量

然后系统变量C:\Program Files\nodejs\node_global

我这问题。。

我这些名字太长了,提取出去

然后替换

长度过后,就可以添加自己想要的环境变量

然后运行问题,遇到C盘权限问题,我换成d盘,手动重复操作了一遍。

npm config set prefix “D:\nodenpm\node_global”

npm config set cache “D:\nodenpm\node_cache”

然后环境变量也手动改了下。

然后把npm文件夹下的,剪切过去,如果你一开始就设置对了路径,就不用这么麻烦了。我这里最终用360粉碎。

重新安装cnpm,webpack

cnpm install webpack -g

不用这个cnpm install vue-cli -g

用cnpm install -g @vue/cli

遇到错误

cnpm rebuild node-sass

然后重新安装,反正还是无效。

最后换成 npm非cnpm安装的vue-cli

npm install -g @vue/cli

等待一段时间装好了

打开powershell

输入 vue -v

表示安装通过了。

继续新建vue项目

打开vscode

打开调试控制台

点击终端

弹出个powershell窗口

进入项目创建的目录

输入

vue create ayhellovue

回车

按键盘 上下键选择vue版本

我选择的vue3 preview

创建大约需要60多秒

打开vscode,文件- 将文件夹添加到工作区

点击添加

运行项目 进入项目文件夹根目录,npm run serve

等待几秒

浏览器输入

则项目运行成功

vue项目发布:

打开终端ctrl+~

输入 npm run build

打开项目文件 dist目录下,就是发布后的,直接拷贝到  web服务器上就行了,类似桌面开发的release文件夹。

关于其他插件eslint ,git的后面再讲

====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========

推荐您阅读更多有关于“”的文章

高可用服务之Keepalived邮件通知配置

上一篇

Go 1.15.2 和 1.14.9 发布了

下一篇

你也可能喜欢

从C#转web前端之路记录[1]-配置环境vscode,汉化,插件,vue,vue-cli,npm

长按储存图像,分享给朋友