系统首页

使用VSCode创建一个Vue项目

来源:自通100    发布时间:2023-10-28 11:17:03    浏览:12


1. 下载 Node.js


官网地址:Node.js ,选择长期维护版下载。








安装时可以自己选择安装位置,然后一直选择 next 即可。安装完成后,打开命令行窗口,输入 node -v ,出现了版本号信息就表示已经成功安装。








配置环境变量:node.js会在系统变量Path里自动配置好:








2. 安装 npm


由于NPM的仓库资源在国外,传输速度较慢。所以使用淘宝镜像源npm。




同样打开命令行窗口,运行以下命令进行安装。




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


查看镜像是否安装成功:




npm config get registry


如下即说明镜像安装成功:








3. 安装 vue-cli (vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板)


npm install -g @vue/cli


检查 vue-cli 版本:命令行窗口输入:vue -V




如下即为安装成功。








4. 安装 webpack


webpack--一个静态的模块化打包工具,最终可以将代码打包成静态资源部署到服务器


npm install webpack –g # 全局安装


5. 创建项目与安装相关依赖


在 VSCode 打开想要创建项目的文件夹,ctrl+j 打开控制台,也可以使用命令窗口进入到对应的文件夹,输入:Vue create project_name。注意:这里需要管理员权限运行cmd


vue create 项目名称






选择 Manually select features,点击回车








暂时选择 Bable 和 Router 两个选项,后续可以根据需要自行进行添加。空格是选择和取消选择,选好后回车进行下一步。
















选择package.json




是否保存这次的设置?n








创建成功后,控制台输入 npm run serve 即可运行。




打包命令:npm run build,生成dist文件打包给后台,项目路径中要采用相对路径


安装 element-ui:cnpm install element-ui --save


安装 axios:cnpm istall axios --save


安装 vuex:cnpm i -S vuex@3.6.2 ,@后面可以指定版本号


————————————————


版权声明:本文为CSDN博主「Ethereal@_@」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。


原文链接:https://blog.csdn.net/weixin_45410366/article/details/125740025


上一篇:到顶了……

下一篇:php+jquery实现的图片批量压缩上传

标签云