主要介绍创建vue项目(图形教程)的步骤,通过示例代码介绍的非常详细,有一定的参考价值,感兴趣的朋友可以参考一下。
目录
安装npm安装vue脚手架创建vue项目启动项目
安装npm
1.检查节点。这里没有安装。下载最新版本的安装。
2.检查npm。节点附带npm,但它不是最新版本。它需要通过命令来更新:npm install -g npm。
安装vue脚手架
1.在国内下载会有网络问题。建议淘宝镜像下载配置镜像:NPM install-g cnpm-registry=https://registry.npm.taobao.org。
2.用cnpm安装vue脚手架:cnpm i -g @vue/cli(其中I是Install的缩写,G是global的缩写)。
创建vue项目
1.使用脚手架创建vue项目:vue create test(test是项目名)
2.选择第三个自定义添加:
默认([Vue3] babel,eslint):vu E3的项目,只包含js编译器babel和代码检测工具ESLINT。
默认([Vue2] babel,eslint):vue 2的项目,只包含js编译器babel和代码检测工具ESLINT。
手动选择特征:自定义添加选择功能。
3.选择配置,并检查常规项目的以下选项:
Babel: js编译器类型脚本:js的超集渐进式Web App支持:渐进式Web应用路由器:vue的route Vuex:vue的状态管理css预处理器:CSS预处理器Linter/Formatter:代码风格检测和格式化(如果你的代码不是很标准,你可以用这个约束来约束自己,也可以选择不用,根据你自己的风格)单元测试:单元测试E2E测试:端到端测试
4.选择vue3(根据自己的需求)
5.路线采用历史模式,输入y:
6.选择第一个CSS预处理程序:
7.选择第三种标准配置:
8.选择第一个,写代码时提示错误:
9.Babel、ESLint等的配置存储选项。都存储在package.json中选择第二个选项:
10.保存为demo,下次再次创建项目时,会多一个demo选项,无需再次配置即可直接使用:
11、点击enter并等待创建完成:
启动项目
1.到项目目录:cd test。输入启动命令:npm run serve。
2.打开链接启动项目:
关于创建vue项目的步骤(图文教程)这篇文章到此为止。有关创建vue项目的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!