当前位置:网站首页 / vue2.X / 正文

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

时间:2020年09月10日 | 作者 : aaronyang | 分类 : vue2.X | 浏览: 41次 | 评论 0

image.png


image.png

安装下吧。


image.png


image.png


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

image.png


然后安装nodejs环境,基本

http://nodejs.cn/download/

image.png

image.png

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

image.png


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

image.png


nodejs安装好了,接下来汉化

打开插件那个地方搜索

Chinese(Simplied) Lang

image.png

接下来重启vscode,已经中文


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

image.png


(请先跳转到下面的

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



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

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

image.png

image.png

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

安装webpack

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

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


cnpm install webpack -g

image.png



(跳过,后面我使用的是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

image.png


新建vue项目

在D盘新建个ayvue文件夹

进入文件夹

image.png


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


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

输入  cnpm install -g @vue/cli

image.png

还是有问题

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


输入Get-ExecutionPolicy -List

image.png

Set-ExecutionPolicy RemoteSigned -Scope Process

image.png


我输入了A回车

Set-ExecutionPolicy RemoteSigned -Scope Process

image.png


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


手动新建2个目录

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

image.png

打开cmd设置

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"


image.png

配置环境变量

image.png

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

我这问题。。

image.png

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

image.png

image.png

然后替换

image.png


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

image.png



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

npm config set prefix "D:\nodenpm\node_global"

npm config set cache "D:\nodenpm\node_cache"

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


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

image.png


重新安装cnpm,webpack

image.png

cnpm install webpack -g

不用这个cnpm install vue-cli -g

用cnpm install -g @vue/cli



遇到错误

image.png

cnpm rebuild node-sass

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


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

npm install -g @vue/cli

等待一段时间装好了


打开powershell

输入 vue -v

image.png

表示安装通过了。






继续新建vue项目

打开vscode

image.png

打开调试控制台

点击终端

image.png

弹出个powershell窗口

image.png

进入项目创建的目录

输入

vue create ayhellovue

回车


按键盘 上下键选择vue版本

image.png

我选择的vue3 preview

创建大约需要60多秒

image.png

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

image.png

image.png

点击添加

image.png



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

image.png

等待几秒

image.png


浏览器输入

image.png

则项目运行成功



vue项目发布:

打开终端ctrl+~

输入 npm run build

image.png


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

image.png



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


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







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

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表