vue-cli 3.0 安装和创建项目教程

使用前我们先了解下3.0较2.0有哪些区别


  • 3.0 新加入了 TypeScript 以及 PWA 的支持
  • 部分命令发生了变化:
    • 下载安装  npm install -g vue@cli
    • 删除了vue list
    • 创建项目   vue create
    • 启动项目   npm run serve
  • 默认项目目录结构也发生了变化:
    • 移除了配置文件目录,config 和 build 文件夹
    • 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
    • 在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件

 

下面进入正题,进行安装和创建项目


首先  安装npm3.0

npm install -g vue@cli

下一步  创建项目文件

vue create projectname    //项目名

下一步  选择快捷式安装配置

前面的是你之前安装的项目配置,第二个是默认配置,最后一个是自行配置,建议选最后一个

下一步  自行选择安装配置

这个自行选择配置,按上下键切换目标选项,按空格键勾选和取消,按a全选,按i反选,选好后回车确定

  1. Babel,转译成浏览器可识别的语言,可以让你的项目支持更新的语法,如es6\es7等
  2. TypeScript,新增的选项卡
  3. PWA,模拟原生app,渐进式网络应用程序
  4. 路由
  5. vuex管理模式
  6. css预处理语言
  7. 代码规范
  8. 组件单元测试
  9. 端对端测试,模拟用户真实场景

下一步  选择css预处理语言

下一步  选择代码规范配置

  1. 只进行报错提醒;
  2. 不严谨模式;
  3. 正常模式;
  4. 严格模式;

下一步  是否保存当前配置信息

选择第一个,下次创建项目就会有本次的配置出现供你选择

下一步  选择babel,postcss,eslint配置文件存放位置

第一个方独立文件夹里,第二个放package.json里,建议选第一个

下一步  填写项目描述

然后就开始创建项目,下载依赖

等进度条完成,项目就创建好了

最后我们开始进入项目根目录,运行项目试试

cd  D:\test\test   //进入你的项目根目录,或在你项目根目录shift+右键,点击在此处打开命令窗口
npm run serve  //运行项目

参考文档:https://cli.vuejs.org/           Vue CLI 3 的官方说明 

  • 4
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用vue-cli创建Vue.js 3.0项目的步骤如下: 1. 首先,确保你已经安装了Node.js和npm(Node.js的包管理器)。 2. 打开命令行终端,并通过以下命令全局安装vue-cli: ``` npm install -g @vue/cli ``` 3. 通过以下命令检查vue-cli安装是否成功: ``` vue --version ``` 4. 在命令行终端中进入你想要创建项目的目录,并执行以下命令来创建一个新的Vue.js 3.0项目: ``` vue create my-project ``` 其中,my-project是你想要给项目命名的名称,你可以根据自己的需求进行修改。 5. 在创建项目的过程中,你可以选择手动配置项目或者使用默认配置。如果你选择手动配置项目,你可以按照提示逐步选择所需的配置项。 6. 当项目创建完成后,进入项目目录: ``` cd my-project ``` 7. 最后,通过以下命令来运行Vue.js 3.0项目: ``` npm run serve ``` 这将会启动一个开发服务器,并在浏览器中显示你的Vue.js应用程序。 通过以上步骤,你就成功使用vue-cli创建了一个Vue.js 3.0项目。你可以按照Vue.js的开发文档进行开发,并且使用vue-cli提供的命令行工具来进行构建和打包。123 #### 引用[.reference_title] - *1* *3* [Vue-cli创建Vue3项目](https://blog.csdn.net/weixin_43551923/article/details/130935438)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [五分钟教你使用vue-cli3创建项目(三种创建方式,小白入门必看)](https://blog.csdn.net/m0_46374969/article/details/120291155)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值