查看“Vue从入门到实战:创建脚手架项目”的源代码
←
Vue从入门到实战:创建脚手架项目
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
创建脚手架项目一般有两种方式, 通过vue create 命令行创建;通过vue ui命令启动图形界面来创建。 ==vue create== ===创建项目=== 选择好目录,打开CMD窗口 输入vue create helloworld ===项目配置=== 进入如下配置,选择第三项(Manually select features): <nowiki>Vue CLI v4.5.11 ? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) > Manually select features </nowiki> 保持默认的Babel和Linter/Formatter的选中状态,按Enter键,接下来会根据你选择的功能提示选择具体的功能包,或者进一步配置。 <nowiki> Vue CLI v4.5.11 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Choose Vue version (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing </nowiki> 解释一下,Babel:转码器,Linter/Formatter:代码风格检查和格式校验。 <nowiki>? Choose a version of Vue.js that you want to start the project with (Use arrow keys) > 2.x 3.x (Preview)</nowiki> 选择代码规范,暂时选择第1个选项: <nowiki>? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier </nowiki> 选择何时检测代码,选择第1项:保存时检测。 <nowiki> Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit </nowiki> 选择配置信息存放的地点:是专门的配置文件,还是存在package.json ,这里选择第1项: <nowiki> ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.json </nowiki> 是否保存此次配置,选择y,以后再用vue create 创建项目时,就用该配置 ? Save this as a preset for future projects? (y/N) 之后输入本次配置的名称。 ===运行项目=== 项目创建完成后, 在命令提示符依次输入cd helloworld 和npm run serve 运行项目 浏览器输入http://localhost:8080/ [[文件:vue21022201.png|600px]] 如果中止项目运行,在CMD窗口按Ctrl+C组合键即可。 ===删除配置(可选)=== 如果要删除自定义的配置,在操作系统用户目录下找到.vuerc文件,删除里面的配置即可 <nowiki> { "useTaobaoRegistry": true, "presets": { "hello": { "useConfigFiles": true, "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "config": "base", "lintOn": [ "save" ] } }, "vueVersion": "2" } } }</nowiki> ==使用图形界面== 在命令提示符输入vue ui命令即可。
返回至
Vue从入门到实战:创建脚手架项目
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息