网站免费源代码,网站开发的项目总结,最便宜的云服务器一年多少钱,莱芜雪野湖风景区介绍〇 说明
本教程全部采用默认安装路径#xff0c;因为在进行自定义路径安装的时候#xff0c;需要配置各种环境变量#xff0c;在这个配置过程中#xff0c;可能出现各种很混乱的问题。
一 安装Node.js
1 下载https://nodejs.org/en 2 按照默认NEXT执行 C:\Program Files…〇 说明
本教程全部采用默认安装路径因为在进行自定义路径安装的时候需要配置各种环境变量在这个配置过程中可能出现各种很混乱的问题。
一 安装Node.js
1 下载https://nodejs.org/en 2 按照默认NEXT执行 C:\Program Files\nodejs 这里不勾选后续需要什么tools的时候再进行安装即可。 3 安装完成后校验
Win R 打开 CMD 输入版本查看命令查看安装是否成功
node -v
npm -v二 安装vue
1 首先定义镜像路径
npm config set registry https://registry.npmmirror.com2 输入下面指令查看路径
npm config get3 安装vue相关工具
3.1 安装webpack
webpack用来项目构建、打包、资源整合等。
npm install webpack -g3.2 安装vue-cli脚手架构建工具
注意这里安装新的脚手架。
npm install -g vue/cli出现warn没关系继续执行即可。 查看vue版本及是否成功
vue -V三 上述命令集
node -v
npm -v
npm config set registry https://registry.npmmirror.com
npm config getnpm install webpack -g
npm install -g vue/cli
vue -V四 基于上述vue创建项目
1 新建一个存放项目的路径如在D盘新建web-system文件夹然后将路径设置到该文件夹。 2 新建项目 vue create vue-demo这里选择第三个Manually select features自定义选项操作并回车至于第一个和第二个选项可以快速搭建带eslint和babel的项目。
vue create vue-demo3 选择配置项这里选择了Babel、Router、Vuex、Linter/Formatter三个选项然后回车。 4选择vue版本这里选择vue2然后回车。
5选择router的模式 vue-router分为两种模式hash、history 这里选择history模式所以输入Y,然后回车如果使用hash,则输入n。 6代码语法错误检查这里选择ESLint Standard config这个是标准的然后回车。 7选择检查代码语法的时机这里选择第一个Lint on save保存时检查然后回车。 8第三方配置文件存在的方式这里选择第一个In dedicated config files然后回车。 9是否保存本次配置为预设项目模板这里选择N(也可以选择Y这样下次可以直接使用该配置方案快速搭建项目)然后回车等待项目搭建成功。 (10)项目搭建完成。
11按照提示运行项目
cd vue-demo
npm run serve12在地址栏输入http://10.93.226.107:8080/或者http://localhost:8080/可以直接打开VUE起始页。 - Local: http://localhost:8080/- Network: http://10.93.226.107:8080/五 安装VS Code
1 下载https://code.visualstudio.com/ 2 安装VS Code 3打开已新建的项目
1“文件”—“打开文件夹”—找到D:\web-system\vue-demo直接选择该文件夹项目同时包含在其中。 信任项目
2在VScode终端运行项目。 ① 打开终端 ② 输入npm run serve ③如果不行的话记得用系统管理员权限操作。 3在地址栏输入http://10.93.226.107:8081/或者Ctrl单击地址可以直接打开VUE起始页。 4 结束运行项目
在控制台界面按CtrlC。
