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 安装与初始化的入门教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
详解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
-
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的状态初始化.这里的状态初始化指的就是在创建实例的时候,在配置对象里定义的属性.数据变量.方法等是如何进行初始处理的.由于随后的数据更新变动都交给观察系统来负责,所以在事先弄明白了数据绑定的原理之后,就只需要将目光集中在这一部分. 来仔细看看在核心类中首先执行的关于 state 部分的源码: initState // 定义并导出initState函数,接收参数vm export function initState (vm: Com
-
VUE 实现滚动监听 导航栏置顶的方法
HTML 非重点的代码,比如样式啥的,我就不放上来了,一笔带过 简略的写一下html代码,可以对照文章最后的效果图看,应该不难理解 <div :style="{ paddingBottom: paddingBottom}"> <header>资源信息</header> <div> <!-- 公司信息 浏览量 --> </div> <div id="fixedBar" :class=&quo
-
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'> <
-
前端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
-
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
-
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 中学习指令和绑定
我的 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++编译器下载和安装的方法步骤(入门教程)
目录 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 至此,
随机推荐
- jquery中获取id值方法小结
- AngularJS 中的Promise --- $q服务详解
- JS实现霓虹灯文字效果的方法
- ORACLE SQL-UPDATE、DELETE、INSERT优化和使用技巧分享
- Python写的PHPMyAdmin暴力破解工具代码
- 用C#编写ActiveX控件(二)
- PHP实现的蚂蚁爬杆路径算法代码
- Javascript 判断 object 的特定类转载
- Android开发之sqlite3命令行简单使用方法
- 批处理应用:使用FLASHGET检查Mcafee SuperDat更新
- jQuery实现网页顶部固定导航效果代码
- java 基本算法之归并排序实例代码
- Android编程使用GestureDetector实现简单手势监听与处理的方法
- php mongodb操作类 带几个简单的例子
- C语言和go语言之间的交互操作方法
- vue自定义全局组件(自定义插件)的用法
- vue新vue-cli3环境配置和模拟json数据的实例
- C++设计模式之装饰模式(Decorator)
- Python 进程之间共享数据(全局变量)的方法
- vue实现拖拽的简单案例 不超出可视区域