精品课程 网站建设质量,电子书推送网站怎么做,营销网站与企业网站的区别,三亚网站建设介绍最近在开始接触做vue框架的前端项目#xff0c;以前用的前端比如html#xff0c;js#xff0c;css等都是比较原生的#xff0c;写好后直接浏览器打开就行。但vue跟java一样是需要编译的#xff0c;和微信小程序类似。今天就先记录一下vue的开发运行搭建。所需工具如下 nod…最近在开始接触做vue框架的前端项目以前用的前端比如htmljscss等都是比较原生的写好后直接浏览器打开就行。但vue跟java一样是需要编译的和微信小程序类似。今天就先记录一下vue的开发运行搭建。所需工具如下 nodejs 等同于jdk使得js可以跨平台 visual Studio Code 类似idel、eclipse等开发工具也可以选别的开发工具 一、下载安装node.js。官方下载地址 https://nodejs.cn/download/ 选这个长期支持的版本就好就像jdk一样目前主流还是1.7和1.8的版本 想下载最新版本也行。 下载后双击安装一直点击下一步啥也不用修改勾选完成安装默认安装目录C:\Program Files\nodejs\不想装C盘就改成别的目录。然后设置系统环境变量双击path添加一行如下填上nodejs的安装目录win7是在path的值后追加 ;C:\Program Files\nodejs\ 二、验证安装成功 输入如下两个命令显示版本号说明安装成功和验证jdk安装类似
node -v
npm -v三、查看修改模块下载位置非必须可省略有点类似mevan自定义本地仓库地址反正有默认的下载存放路径想改成别的按如下去改
npm get prefix # 查看 全局模块的存放路径
npm get cache # 查看 缓存默认存放路径
npm config set prefix 你的新路径 # 修改 全局模块的存放路径
npm config set cache 你的新路径 # 修改 全局模块的存放路径四、修改镜像非必须但建议类似修改maven的settings.xml文件里面的仓库地址 由于npm的服务器在国外下载速度慢卡所以大家一般更换为淘宝镜像https://registry.npm.taobao.org可以参考下面命令替换镜像地址即可。
npm config get registry # 查看当前使用的镜像 默认是 https://registry.npmjs.org
npm config set registry https://registry.npm.taobao.org/ # 更换npm镜像这两个命令牢记一下后续开发中可能会常用。因为有些公司可能有自己的私有镜像地址不同的项目用的镜像地址不同所以会来回切换。切记镜像不切换有些依赖包就下载不下来项目自然也就运行报错跟java一样的。 cnpm安装(淘宝提供的主要用于下载模块) 下载依赖包有时候通过npm命令部分东西下载不下来但通过cnpm却可以所以还是有必要安装一下安装也就简单就一行命令
npm install -g cnpm --registryhttps://registry.npm.taobao.org # 安装
cnpm -v # 检查是否安装成功执行效果如下 安装完成后会多出如下文件夹。不过不用管上面查看cnpm版本执行成功就ok 五、安装VSCodeUserSetup-x64-1.73.1.exe 网上搜索visual Studio Code下载程序包后也一直下一步按完成安装即可。安装后是英文版的首次打开的时候右下角会有个弹窗提示安装汉化包直接点击安装后重启vscode。如果没弹窗点击左测第四个菜单“拓展”相当于idel的plus装插件的地方输入language 选择chinese进行安装。 切换语言 快捷键CtrlShiftP会弹出命令窗口输入“configure language”回车选择需要切换的语言 六、运行项目 1 导入项目 先从git/svn拉下代码到本地点击菜单栏 file– 打开文件夹选择到你代码存放的那个文件夹 这样就把项目导入了。先介绍一下的布局和常用按钮菜单和idel的使用差不多 “控制台”和“终端”的唤起 方法1 点击菜单栏的查看再点击“控制台”或“终端”即可。 方法2 快捷键是ctrl shit Y 更多功能的快捷键,可以点击 帮助 -- “键盘快捷方式参考” 会跳转浏览器展示一个pdf给你. 点击查看 如果没有 控制台 终端 等菜单右键给对应的打勾就显示了
2 下载依赖 点击终端 输入命令 npm install 或者 npm i (npm 也可以替换为cnpm) 下载完成后 你的项目下会多出一个node_modules的文件 这就是执行后下载下来的依赖包了。相当于maven的本地仓库一样只不过maven是所有项目公用它却是项目独享。如果有部分没下载成功可以尝试删除这个文件夹重新执行命令进行重新下载
3 运行项目 在项目的跟目录下面找到package.json 这个文件scripts参数后面的值就是可以运行的服务名称。ctrlshfit唤起 终端 输入命令 npm run 项目服务名称 执行命令 npm run server 复制上面local的url 地址到浏览器打开即可看到vue项目的首页项目启动成功。如果需要打包项目执行命令 npm run build 。 项目的代码结构介绍和常用功能可以参考我另外一篇
