Vue新建项目过程教导

最新推荐文章于 2023-05-15 11:26:22 发布
最新推荐文章于 2023-05-15 11:26:22 发布
阅读量126 收藏
点赞数 1
whqbg
本文链接：https://blog.csdn.net/heiyanmin/article/details/108658997
版权

Vue新建项目过程教导

  1. 进行vue环境安装

  2. 开始创建项目名为wode的vue工程
    vue create wode

  3. 项目配置

    • 默认上次新建项目的配置
    • 系统默认配置
    • 手动配置 （选择这个）

  4. 选择手动配置后出现的选项，空格选中自己需要的，enter下一步，根据你选择的要求不同，后面出现的选项会变化，我把我遇到的写一下。
    在这里插入图片描述
    Babel：将ES6编译成ES5
    TypeScript：JS超集，主要是类型检查
    Progressive Web App (PWA) Support //渐进式Web应用
    Router和Vuex，路由和状态管理
    Linter/ Formatter：代码检查工具
    CSS Pre-processors：css预编译 (稍后会对这里进行配置)
    Unit Testing：单元测试，开发过程中前端对代码进行自运行测试
    E2E Testing 测试

  5. 是否使用Class风格装饰器？
    在这里插入图片描述

    即原本是home = new Vue()创建vue实例 ，
    使用装饰器后：class home extends Vue{}

  6. 使用Babel与TypeScript一起用于自动检测的填充? yes
    在这里插入图片描述

  7. 路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
    在这里插入图片描述

  8. 选择CSS预编译器，我选择的是Stylus，具体差异请百度
    在这里插入图片描述

  9. 选择格式检验方式
    在这里插入图片描述

    tslint: typescript格式验证工具
    eslint w...: 只进行报错提醒； 【选这个】
    eslint + A...: 不严谨模式；
    eslint + S...: 正常模式；
    eslint + P...: 严格模式；

  10. 选择代码检查时期
    在这里插入图片描述
    Lint on save 语法检查配置文件保存时检查
    Lint and fix on commit 文件提交时检查

  11. 选择配置文件存放位置
    在这里插入图片描述
    In dedicated config files 放独立文件放置
    In package.json 放package.json里（一般是放在这个位置）

  12. 是否在以后的项目中使用以上配置？，自己看着来
    在这里插入图片描述

  13. 等待下载完，到此大功告成！

  14. 这里是我的所有要求目录
    在这里插入图片描述

参考自这里与那里

滑稽的
关注
安装vue-cli
测试开发架构师
03-28 139
安装vue-cli 一、vue-cli是什么 vue-cli是vue官方提供的脚手架工具，默认搭建好一个项目的基础架子，我们在其基础上进行相应的修改即可 下载模板地址：https//github.com/vuejs/vue-cli 或者全局安装vue-cli：npm install -g @vue/cli（建议全局安装，安装好后，在任何一个文件夹下面初始化项目都可以使用这个脚手架） 查看脚本是否安装成功 ...
记一次vue--NavMenu--左侧导航栏动画效果折腾记
郝峰vip的博客
12-06 737
前沿 小编最近在做公司的后台管理项目中，使用到element-ui作框架，其中使用到element-ui的navbar左侧菜单栏导航，发现有一些需求是其不能满足的，于是乎痛定思痛就自己动手搞了一个，过程中发现自己的不足之处，遂记录下来，毕竟好记性不如烂笔头吗？ 生明 本效果在实现过程中操作了dom，这是令小编头疼的地方，但是苦于现在没有找到好的解决办法，所以暂时先拿这个上项目了，(时间紧迫，项...
vue create创建项目手动配置步骤
weixin_45032067的博客
08-16 3185
vue create创建项目
vue-cli 3.0安装和使用
一个来自外太空的游客
11-13 1307
Vue CLI介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项目内的配置文件进行...
Vue cli 安装
Recall_2001的博客
10-17 1556
一、前言 因为之前的引用vue.js的方式，只能适合学习和简单的代码使用，如果真的进行项目的开发，就需要搭建vuecli脚手架。 vue-cli的初衷: 这些工具就是为了让开发者能够开箱即用快速地进行应用开发而开发的，它们秉承的是“约定大于配置”思想，简单说就是"能不配置的就不配置，你就按照我的方式来，也不要去争论这个好不好，快速进行业务开发才是正经事". 它们不建议你去配置，但也不会拦着你去配置。 另外Webpack对初学者并不是十分友好，‘又长又臭’的配置，普通开发者很难写入定义良好，性能优化的.
前端基础-Vue.js构建一个项目
逍遥云恋
03-26 506
第12章 构建一个项目 12.0 命令行工具 (CLI) https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included ...
vue安装或升级3.0
热门推荐
hlvy
10-30 4万+
关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可...
可视化神经网络实验报告,可视化神经网络工具
wenangou的博客
10-21 3707
一、网络爬虫网络爬虫是Python比较常用的一个场景，国际上，google在前期大量地运用Python言语作为网络爬虫的根底，带动了整个Python言语的运用发展。二、数据处理Python有很齐备的生态环境。"大数据"分析中涉及到的分布式核算、数据可视化、数据库操作等，Python中都有成熟的模块能够挑选完结其功能。关于Hadoop-MapReduce和Spark，都能够直接运用Python完结核算逻辑，这不管关于数据科学家仍是关于数据工程师而言都是十分便当的。三、web开发Python的诞生前史比Web还
TT随笔四 前台的CURD封装
04-19
总的来说，这篇博客可能是一篇实用教程，教导开发者如何在前端项目中高效地组织和管理数据操作，提高代码质量并减少开发时间。通过学习这样的封装技术，开发者可以更好地构建和维护复杂的Web应用程序。
vue-cli 安装
m0_72674204的博客
09-26 421
npm全称 Node Package Manager，基于Node.js的包管理器，也是整个Node.js社区最流行、支持第三方模块最多的包管理器。在Vue项目中，网页不再书写html文件、CSS文件、js文件，都用后缀名为XXXX.vue文件代替。运行成功之后，在cmd中，再输入npm config list 查看是否设置成功。在终端，如果处于工作区目录下，可以通过 cd 项目名称，进入到项目所在的目录，在vue项目中，把一个vue文件，叫做单文件组件。插件3：vetur -- vue插件。
vue-cli安装
可爱又迷人的反派少女
12-21 140
vue2.0 1.全局安装webpack npm install webpack -g 2.全局安装vue-cli npm install vue-cli -g 以上两步只需要安装一次 下面就是创建项目 3.vue init webpack demo 项目名称为小写名字即可 4.cd demo 进入创建的文件中 5.npm run dev 启动项目 ...
vue-cli中安装方法
adai19850204的博客
11-07 2917
源：http://www.cnblogs.com/jn1223/p/6656956.html vue-cli中安装方法 vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘...
vue.cli安装
谢谢你的关注
07-21 1092
vue.cli安装 （原因：没有将vue-cli添加到环境变量 1.找到全局安装包路径：vue.cmd所在目录 2.添加为环境变量 3.重启终端或重启电脑）
安装Vue CLI
最新发布
qq_62837251的博客
05-15 552
要安装 Vue CLI，你需要先安装 Node.js 环境。
vue-cli的安装
夏小小的博客
07-17 1199
vue-cli的安装 1.安装github和node.js node自带npm，如果你想升级npm为最新，键入npm install npm -g “http://www.jianshu.com/p/03a76b2e7e00 npm install vue 3能查看vue的版本之后记得安装webpack” npm install webpack -g 2.
vue Cli（脚手架）安装
stay_少年的博客
05-22 1万+
vue脚手架安装全过程 vue cli (也可以说是脚手架） 是一个基于vue.js进行快速开发的完整系统。 通过 @vue/cli 实现的交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项目内的配置文件进行配置； 可以通过插件进行扩展。 一个丰富的官方插件集合，集成了前端生态中最好
安装 vue-cli3.0
孙冉的博客
04-23 465
1.npm I @vue/cli -g 安装 vue-cli3.0 vue安装教程 2. Vue -v 检查vue-cli版本 3. vue create admin 创建项目 4.选择项目需要的的配置项（网上有很多例子这里就不做过多的阐述了···） 5.创建完项目我们就能看到这样的文件目录，相对之前的有很些的改动 是不是相对2.0精简了很多。 由于 vue-cli 3 采用了的零配置的思路，...
脚手架vue-cli系列一：安装与规范
weixin_30741653的博客
09-26 167
我很喜欢Vue的一个重要原因就是因为它的vue-cli，这个工具可以让一个简单的命令行工具来帮助我快速地构建一个足以支撑实际项目开发的Vue环境，并不像Angular和React那样要在Yoman上找适合自己的第三方脚手架。vue-cli的存在将项目环境的初始化工作与复杂度降到了最低。 1.安装vue-cli vue-cli是一个npm的安装包，我们希望它能在本机的任意目录下创建项目，那么就得...
【笔记】vue-cli安装
qq_44443506的博客
07-29 200
vue-clivue-clinode.js环境安装配置环境变量常用的dos命令npm安装及参数设置1. npm与cnpm的区别2. -g参数3. vue-cli2 安装自动手动指定哪个镜像服务器获取资源4. -S,-D参数5. 初始化 vue-cli node.js环境安装 下载地址 选择合适的下载 下载完成后点击安装，一直点下一步就可以，但是安装位置得记住，方便后面配置path环境变量。 安装结束后。点击鼠标右键，再点击运行，输入cmd，回车。 在命令行输入node -v 安装之后
Pycharm中详细教程：快速搭建Vue项目步骤
本文详细介绍了如何在PyCharm中新建Vue项目的步骤，这对于使用PyCharm开发Vue应用的开发者来说是非常实用的教程。首先，你需要确保你的电脑上已经安装了Node.js，因为Vue.js的开发依赖于Node.js环境。可以从Node.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值