上传网站代码,门店营销活动策划方案,自己做网站 微信,jsp体育用品网站建设目录
1 基本配置
2 安装vscode
3 安装vue
4 配置bash
5 安装nvm
6 安装node
7 安装yarn
8 新建项目
9 运行helloworld 1 基本配置
本篇是为了做前端开发的环境而写。使用的操作系统是windows 10 64位
2 安装vscode
现在做vue和node基本就是vscode和webstorm#x…目录
1 基本配置
2 安装vscode
3 安装vue
4 配置bash
5 安装nvm
6 安装node
7 安装yarn
8 新建项目
9 运行helloworld 1 基本配置
本篇是为了做前端开发的环境而写。使用的操作系统是windows 10 64位
2 安装vscode
现在做vue和node基本就是vscode和webstorm本篇就是用vscode。
可以从主页直接下载 选择windows版本下载即可。 下载速度还是可以的如果下不下来可以看本篇的附件资源。
下载后就是一顿默认安装只有文件关联那里不要勾选因为平时也不用vscode默认浏览。 安装好直接打开我们从vscode里下载vue相关组件。
3 安装vue
打开vscode后点击插件搜索vue volar 会找到一堆插件选择vue volar extension package 目前版本是1.1.8 直接点击install就可以这里下载速度有点慢需要等1-3分钟。下载好后是这样的 这样就算是安装好了接下来安装git使用git主要是想用他的bash。vscode默认是使用powershell
4 安装git
也是从官网直接下载下载慢的话去本文资源自己拿。 下载的网速有点慢就顺手把后面要用的nvm也一并下载了。 nvm是管理node版本的包一会弄完git后我们会用nvm来下载node。所以从电脑网页下载的就只有3个 好了 git终于下完了才50m打了一局王者才下下来。开始安装。 还是一顿默认安装就可以。 安装速度还是很快的。安装完毕后在vscode里进行配置。
4 配置bash
用管理员权限打开vscode再打开terminal终端。 选择select default profile 然后刚才不是安装git了么就选择bash就行 这样就设置好了关掉vscode重新进入就可以看到bash是默认的终端了。
5 安装nvm
接下来安装nvm点击安装包一顿默认安装。 就可以了。安装好以后我们要在vscode的bash终端用他安装node。
6 安装node
用管理员权限打开vscode在bash终端输入
nvm list available 这里会列出nvm可用的node的版本号看不到的话把终端调大一点 我们选择一个版本安装通常安装lts版的这是长久维护的稳定版
nvm install 18.19.0 网速不好的话安装node需要花费2-3分钟。可恶的移动网络。
安装完就是上面这个样子了。
之后需要打
nvm use 18.19.0
这样才是配置好node了。 为了验证下是否安装好可以检查下版本号
node -v
就看到当前版本号了。 7 安装yarn
yarn是管理依赖的一个包也需要安装输入
npm install yarn -g
就开始安装了也要花费一点时间 这样就算是安装好了其实我有点觉得好像就没安装原来就有似地。也可以照猫画虎的检查下yarn的版本号
yarn -v 好了有版本号那就是可以使用了。
8 新建项目
在本地文件夹新建一个叫source的文件夹 用来存放工程。
之后在bash输入
cd /d/web/source 就进入到文件目录下了。接下来执行yarn命令来创建工程依赖的文件
yarn create vite 这时候就会自动往这个文件夹下下载东西了大概是30多M。都是些依赖的资源和文件。
下载完毕后会要求输入工程名字
输入
vite-demo
紧接着要求选择是设呢框架咱满就选择vue
再接着又要选择是js还是ts我们选择js 选择完了项目就建好了 9 运行helloworld
上面提示已经给出提示后面怎么弄我们跟着走一遍。
首先是cd到目录下
cd vite-demo
然后执行yarn
yarn 然后终端又是一顿嘎嘎蹦字儿过一会儿就好了。 这时候我们可以用vscode打开工程了点文件-打开文件夹选择刚才建好的工程的目录 可以看到这文件夹有30m大小。 这下我们终于用vscode打开工程了。
在终端输入
yarn dev
终端一顿运行终于出来这个页面有个网址了打开网址一看成了 我们打开components文件夹下的文件修改一下 再看效果 可见页面是实时更新的。
这样就算是完成了vue的helloworld项目了。 最后有点疑问
vue为啥用vscode安装而且在没有node情况下就可以安装
vscode安装的文件都在哪里在控制面板能看到卸载选项吗
vue具体咋用还得实现个小项目才能了解更多。
最后提醒一下node和vscode都不太支持win7了所以开发必须得换win10
