vue3.0 CLI - 1 - npm 安装与初始化的入门教程

node 开发环境请先自行准备

npm install -g @vue/cli 安装完成之后命令行则存在 vue 命令

vue -V 查看本地 vue 版本 vue -h 输出帮助

vue create <project-name> 进入工程文件夹，创建项目。

如：cd studyVue ( 进入工程文件夹 ) vue create config ( 创建 config 项目 )

选择 default 配置项，下面没什么可介绍的，自行尝试。

下面介绍选择 manually select features 的相关流程 ( 使用上下箭头按键切换选项 - enter 按键确定选择 - 下同 )

该配置项：选择项目需要的特性 ( 让你选择项目里边的插件 )

Babel - 转码工具；TypeScript - 微软出的 js 的超集；PWA -渐进式WEB应用；Router - 路由功能；Vuex - 中心化状态管理；CSS - css处理器；Linter - 代码美化与检查； Unit Testing - 单元测试； E2E Testing -端到端测试。

作为一个有志气的人，咱们全都选，以后慢慢学。( 空格键按键选择 - 下同 )

按下 enter 确定之后，能看到上一个配置项我们选择了什么。

该配置项：是否使用 class-style 组件语法，选择 yes 。

该配置选择 yes 。

该配置项：是否使用 history 模式 ( 该模式含义以后我会介绍 - 官网也有介绍 )，选择 no 。

该配置项：选择 css 预处理 ( 我没用过 css 预处理器 )，任意选择了一个。

该配置项：选择代码美化和检查配置。这里选择标准配置 ( 我也没用过，先选一个 )。

该配置项：选择代码检查美化的相关配置。两项都选。

该配置项：选择单元测试解决方案。选择 mocha ( 我也没用过，选择一个用的人多的 )。

该配置项：选择端到端测试解决方案。选择nightwatch( 我也不懂，读者自行选择 )。

该配置项：选择在哪里存放上述的所有的配置。以前都是放在 package.json 中 ( webpack 使用习惯 )，另外一个是 vue 3.0 新的存配置的方式，使得配置项更加简洁。选择In dedicated config files 。

该配置项：将以上所有的配置过程，保存为默认的配置流程。( 也就是个人设置的意思，以后新建项目，默认采用这些配置 )。选择 yes 。

后面让你为这个配置项进行命名。我输入 nDosVue 。

之后就开始自动化的工程配置。1 min 之内就配置好。

npm run serve 开启网站；cd config 进入配置文件夹。到此，vue 创建第一个项目完成。

最后生成的目录如上图。

总结

以上所述是小编给大家介绍的vue3.0 CLI - 1 - npm 安装与初始化的入门教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • VUE 实现滚动监听 导航栏置顶的方法

    HTML 非重点的代码,比如样式啥的,我就不放上来了,一笔带过 简略的写一下html代码,可以对照文章最后的效果图看,应该不难理解 <div :style="{ paddingBottom: paddingBottom}"> <header>资源信息</header> <div> <!-- 公司信息 浏览量 --> </div> <div id="fixedBar" :class=&quo

  • 详解Vue底部导航栏组件

    不多说直接上代码 BottomNav.vue: <template> <div class="footer"> <div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)"> <img :src="index===idx?item.iconSelect:item.i

  • vue数据初始化initState的实例详解

    数据初始化 Vue 实例在建立的时候会运行一系列的初始化操作,而在这些初始化操作里面,和数据绑定关联最大的是 initState. 首先,来看一下他的代码: function initState(vm) { vm._watchers = []; var opts = vm.$options; if(opts.props) { initProps(vm, opts.props); //初始化props } if(opts.methods) { initMethods(vm, opts.method

  • Vue源码探究之状态初始化

    继续随着核心类的初始化展开探索其他的模块,这一篇来研究一下Vue的状态初始化.这里的状态初始化指的就是在创建实例的时候,在配置对象里定义的属性.数据变量.方法等是如何进行初始处理的.由于随后的数据更新变动都交给观察系统来负责,所以在事先弄明白了数据绑定的原理之后,就只需要将目光集中在这一部分. 来仔细看看在核心类中首先执行的关于 state 部分的源码: initState // 定义并导出initState函数,接收参数vm export function initState (vm: Com

  • Vue实现导航栏点击当前标签变色功能

    Vue实现导航栏点击当前标签变色功能

    本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码,供大家参考,具体内容如下 1.效果 2.所有代码 <template> <div class="now-time"> <div class="timebox"> <a href="#" rel="external nofollow" v-for="(item,index) in nowTime" v

  • vue自定义底部导航栏Tabbar的实现代码

    如图所示,要完成类似的一个底部导航切换. 首先.我们需要分为5个大的VUE文件.可以根据自己的习惯来放在不同的位置. 我将5个主要的vue文件放在了5个不同的文件夹 然后,在components文件夹里新建Tabbar.vue/以及Item.vue文件 Item.vue文件如下 <template> <div class="itemWarp flex_mid" @click='changePage'> <span v-show='!bol'> <

  • webstorm+vue初始化项目的方法

    vue新项目准备: 1.安装nodejs,官网下载傻瓜安装 node -v 验证 2.npm包管理器,是集成在node中的,所以安装了node也就有了npm npm -v 验证 3.安装cnpm npm install -g cnpm --registry=http://registry.npm.taobao.org (完成之后,我们就可以用cnpm代替npm来安装依赖包了.如果想进一步了解cnpm的,查看淘宝npm镜像官网.) 4.安装vue-cli脚手架构建工具 npm install -g

  • 前端Vue项目详解--初始化及导航栏

    前端Vue项目详解--初始化及导航栏

    一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your cod

  • vue3.0 CLI - 1 - npm 安装与初始化的入门教程

    node 开发环境请先自行准备 npm install -g @vue/cli 安装完成之后命令行则存在 vue 命令 vue -V 查看本地 vue 版本 vue -h 输出帮助 vue create <project-name> 进入工程文件夹,创建项目. 如:cd studyVue ( 进入工程文件夹 ) vue create config ( 创建 config 项目 ) 选择 default 配置项,下面没什么可介绍的,自行尝试. 下面介绍选择 manually select fea

  • vue3.0 CLI - 3.2 路由的初级使用教程

    我的 github 地址 -vue3.0Study- 阶段学习成果都会建立分支. ========================== 动态路由 在路由某部分里加入[ : ],就成为动态路由如:/user/:id/,那么路由导航,并不是  /user/id/ 而是 /user/666/. 显然这个 id 能被获取,在组件中使用.通过 this.$route.params 获取. this 是当前组件,$route 是路由对象,params 是一个对象字面量 { id:666 }. $route

  • vue3.0 CLI - 2.1 - component 组件入门教程

    我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. 进入 src 文件夹,这是实际都工程文件夹,其他文件夹以及文件以后在了解. 3个文件夹  assets - 各类静态资源文件夹 - 比如 图片, css 文件等.  components - 组件文件夹, 组件是 vue 等 MVC 框架等核心概念,自行了解含义. view - 视图文件夹. 5个文件  app.vue.main.js - 主视图.配合 main.js 成为 vue 程序的主入口.router.

  • vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. helloworld.vue 都挪到 about 路由当中. <template><div class="about"><HelloWorld msg="vue 官方相关资料的链接"/></div></template> <script> import HelloWorld from '@/components/

  • vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. 首先美化一下界面 - 相关的界面代码不粘贴,可从我的 github 分支中看到.下面最终的实现效果图: 改造下 data 中的 navs 属性 ( navs 数组每个元素都是 包含 active 和 data 属性的对象 ): created: function () { fetch('https://www.apiopen.top/journalismApi') .then(v => v.json()) .th

  • vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. 新组件 - 新路由 Forms.vue ( 下面仅介绍如何创立, 不进行介绍 ) : <template><div class="form"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>

  • vue3.0 CLI - 2.6 - 组件的复用入门教程

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. ========================== 定义一个基础组件 这个基础组件,是导航条中 可以复用 的基础组件 单个导航. 基础组件[导航组件]基础的功能是能够显示文字,单击的交互方式.明确任务目标之后,进行开发. 在 component 目录下新建 Base 目录,Base 下新建文件 TopNav.vue.加入如下代码: <template> <div class="topnav&q

  • uni-app从安装到卸载的入门教程

    uni-app实现了一套代码,同时运行到多个平台.支持iOS模拟器.Android模拟器.H5.微信开发者工具.支付宝小程序Studio.百度开发者工具.字节跳动开发者工具 工具安装 开发uni-app需要安装HBuilder X.下载地址. 下载成功后直接解压即可 简单的配置一下开发偏好: 创建第一个uni-app 点击左上角[文件]>>[新建]>>[项目],选择uni-app模板. uni-app目录结构 目录结构基本和小程序的目录结构相似,只是多了个基础组件的文件夹: uni

  • MinGW-w64 C/C++编译器下载和安装的方法步骤(入门教程)

    MinGW-w64 C/C++编译器下载和安装的方法步骤(入门教程)

    目录 1.安装包下载 2.环境变量配置 3.小试牛刀 如果电脑没有安装MinGW-w64 C/C++编译器,在Windows的命令窗口键入gcc会提示 “"gcc"不是内部或外部命令,也不是可运行的程序或批处理文件”. 1.安装包下载 方法一:下载Installer在线安装(费时) 第一步:点击此链接:http://www.mingw-w64.org/doku.php,然后依次进行图1.图2.图3和图4操作,以完成mingw-w64-install.exe下载. 图1 图2 图3 图4

  • Docker安装和简单使用入门教程

    安装 由于我本人使用的linux系统,原生支持docker,相对安装还是比较简单的 1:使用下面的官方脚本安装: wget -qO- https://get.docker.com/ | sh 2:输入下面的命令验证是否可以查看版本号,可以就是安装成功 sudo docker version 3:建议把当前使用的用户加到Docker用户组,就可以不用很次都sudo了 sudo usermod -aG docker your_username 4:重新登录,sudo权限才会成效 logout 至此,

随机推荐