新建 vue 项目

最新推荐文章于 2024-02-28 09:30:00 发布
最新推荐文章于 2024-02-28 09:30:00 发布
阅读量90 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43033775/article/details/89133874
版权

新建 vue 项目
安装 ：npm i @vue/cli -g

使用 vue cli 初始化项目骨架结构
在这里插入图片描述
选择手动配置
在这里插入图片描述
选择项目需要的组建 Bable、Router、Vuex、Linter、Test ，router 和 vuex 可以根据项目需求自行添加
在这里插入图片描述
选择 eslint 方案，统一为采用 airbnb 的配置，在这个基础上增加自定义配置。
在这里插入图片描述
选择保存验证
在这里插入图片描述
选择 jest 为项目的测试框架
在这里插入图片描述
为每一个组建增加单独的配置文件
在这里插入图片描述
依赖包下载安装完成后我们的项目就新建好了

博迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vscode新建一个最简单的vue项目
09-27
vscode新建一个最简单的vue项目
pycharm新建Vue项目的方法步骤(图文)
09-17
在本文中，我们将详细探讨如何使用...希望这篇文章对你在PyCharm中创建Vue项目有所帮助，如果你需要更多的Vue.js或PyCharm的相关教程，可以在网络上搜索更多资源或继续浏览相关文章。祝你在Web开发旅程中一切顺利！
vscode怎么新建vue项目
qq_34959415的博客
05-31 5969
1：确认必要环境已安装 vscode,和nodejs必须安装好 vscode下载地址：https://code.visualstudio.com/Download nodejs下载地址：https://nodejs.org/en/download这里写自定义目录标题) 2：在本地创建一个存放工程的目录 我这里放到d:\usr\myvue 3：使用vscode打开上一步创建的文件夹 4：安装vue-cli vue-cli可以帮助我们快速构建vue项目。 打开终端>新建终端 执行命令：npm ins
Vue项目 快速上手（如何新建Vue项目，启动Vue项目，Vue的生命周期，Vue的常用指令）
最新发布
luming的博客
02-28 2625
Vue是一种用于构建用户界面的JavaScript框架。它是一种轻量级、高效的前端框架，被广泛用于开发单页面应用（SPA）和响应式的Web应用程序。Vue具有简洁的语法、灵活的组件化架构和强大的工具集，使开发者能够快速、高效地构建交互性强、数据驱动的Web应用。Vue也是一个逐渐流行的框架，拥有庞大的社区和丰富的生态系统，为开发者提供了丰富的资源和支持。Vue鼓励使用组件化的方式构建用户界面，将页面拆分成多个独立的、可复用的组件，使得代码更加模块化、可维护性更高。
如何 新建Vue项目
ZPeng_Yan的博客
06-23 1万+
首先：先从nodejs.org中下载nodejs 双击安装，在安装界面一直Next 直到Finish完成安装。 打开控制命令行程序（CMD）,检查是否正常 使用淘宝NPM 镜像 大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 这样就可以使用cnpm 命令来安装模块了： 第二步项目初始化 1.第一步：安装vue-cli cn
IDEA 新建vue项目报错
m0_57537410的博客
09-29 1498
idea新建vue项目报错
新建vue项目中无router文件夹，vue安装路由
热门推荐
weixin_43871857的博客
01-17 1万+
问题：在新建一个vue项目时发现不存在router文件夹 解决： 首先，查看package.json中有没有router的依赖，如果没有的话执行下面图片中的语句。 npm install vue-router --save 新建一个router文件夹，在文件夹下新建一个index.js文件 在文件夹中写入如下内容 import Vue from 'vue' //对应你要跳转的组件 import HelloWorld from "../components/HelloWorld"; impo
VS Code新建VUE项目
zhujun2008的博客
02-09 2322
1、首先打开vscode官网,下载地址：Visual Studio Code - Code Editing. Redefined 2、按住Ctrl+shift+p在vscode软件就会出现一个搜索框，搜索configure display language设置 3、如果上面没有这个选择可以在扩展中搜索Chinese language 进行安装 4、下载安装NODE.JS下载地址：Download | Node.js下载运行文件并安装。完成安装后查看版本 5、安装cnpm npm i..
新建vue项目，在webstrom中用
weixin_57991378的博客
03-23 1493
目录 版本说明： 新建vue项目的前提： 新建vue项目： ​放置到webstrom： 版本说明： 首先我的webstrom版本是2021.2，直接在webstrom新建vue，新建的是vue3，可是我不用vue3，所以利用命令新建，对于我来说简单便捷 新建vue项目的前提： 前提是node npm Vue都已下载完成 是否下载完成的标准是利用命令可以查看到版本 如果没有需要项进行下载 node下载我参考的是：nodejs怎么下载安装？ - html中文网 npm下载命.
新建vue项目添加到远程git仓库
fxg163的专栏
08-07 1894
1、首先创建一个vue项目文件 (vuecli)vue项目名不能包含大写然后进来会发现使用vue脚手架创建的文件是默认有.git文件夹的。也就是默认就是一个仓库。2.连接远程仓库git remote add 远程仓库地址别名 远程仓库地址3.获取远程库与本地同步合并如果远程库不为空必须做这一步，否则后面的提交会失败git pull –rebase origin master4.创建并切换到开发分...
解决新建vue项目的报红问题
L的博客
07-01 4019
解决新建vue项目首行报红问题：js文件报红、jsconfig.json报红、组件中报红
idea新建vue项目
翔子
07-11 4103
https://www.jianshu.com/p/9c1d4f8ed068
详解从新建vue项目到引入组件Element的方法
01-21
本文介绍了从新建vue项目到引入组件Element以及Error when rendering component报错解决，分享给大家 一、新建项目 1.打开cmd，运行：vue init webpack Vue-Demo 2.运行：cd Vue-Demo进入这一级 3.运行：npm ...
Vue插件之滑动验证码
weixin_43033775的博客
04-10 4643
预览 目前仅前端实现，支持移动端滑动事件。版本V1.0.5 github文档地址： https://github.com/monoplasty/vue-monoplasty-slide-verify 安装 npm install --save vue-monoplasty-slide-verify 使用方法： // main.js import Vue from 'vue'; import S...
Vue 项目 ESlint 配置
weixin_43033775的博客
04-09 817
.eslintrc.js /** * 使用 vue cli 3 创建项目时默认生成 .eslint.js 文件及默认配置， * 修改对应的选项已适合 vue 项目开发 */ const path = require('path'); module.exports = { root: true, env: { node: true, }, extends: [ ...
vue 事件修饰符（阻止默认行为和事件冒泡）
weixin_43033775的博客
03-10 632
原生js中，阻止事件冒泡，获取点击对象, e.stopPropagation(); vue阻止事件冒泡@click.stop=“show” <body> <div id="myApp" @click="show2()"> <div @click="show1()"> <button @click.stop="show">vue点我</button> </div> .
vue 常用组件
weixin_43033775的博客
04-09 563
vue 常用组件 https://curated.vuejs.org/ https://github.com/vuejs/awesome-vue Form Picker：https://github.com/mariomka/vue-datetime UI： http://element-cn.eleme.io/#/zh-CN element uI组件 http://mint-ui.github....
vue 多页面开发配置
weixin_43033775的博客
04-09 346
增加 vue.config.js 内容如下： // const fs = require('fs'); // const path = require('path'); const glob = require('glob'); // const titles = require('./title.js'); // const MOD_PATH = path.resolve(__dirname, ...
@vue/cli将px转换成rem单位配置(flexible,px2rem)
weixin_43033775的博客
04-09 265
与原来的vue-cli 2.x版本不同的是：如果使用最新版本的@vue/cli初始化vue项目时，通常看不到webpack的配制文件。而在原来的2.x版本，我们可以在utils.js中轻松配制px2rem相关配置。为了解决这个问题，我研究了一下vue-cli的官方文档，发现我们仍然可以像以往那样配制。具体步骤如下： 安装 安装lib-flexible： npm install --save l...
idea 新建vue 项目
06-23
### 回答1： 为了新建一个 Vue 项目，我们首先需要确保已经安装了 Node.js 和 npm，因为这两个工具是构建和运行 Vue 项目所必须的。 1. 打开命令行工具，使用以下命令安装 Vue CLI： ``` npm install -g @vue/cli ``` 2. 创建一个新的 Vue 项目 使用以下命令创建一个新的 Vue 项目。其中，`my-project` 是你想要为该项目设置的名称。 ``` vue create my-project ``` 3. 运行项目 创建项目后，进入该项目目录，启动开发服务器以运行项目： ``` cd my-project npm run serve ``` 此时，你可以在浏览器中访问 http://localhost:8080/，就可以看到运行中的 Vue 项目了。 如果你需要构建项目以生成生产环境代码，则运行以下命令： ``` npm run build ``` 这将生成一个 `dist` 文件夹，里面包含了静态文件，可以直接在服务器上进行部署。 ### 回答2： 新建一个 Vue 项目的步骤如下： 1. 在命令行中使用 Vue CLI 创建一个新项目； 2. 在配置选项中选择需要的选项，比如项目名称、使用的模板、babel、css预设等； 3. 在创建过程中可以选择是否使用npm 或者 yarn 进行安装依赖包，也可以使用cnpm 安装； 4. 创建完成后，在命令行中输入命令npm run serve可以运行项目； 5. 在浏览器中访问localhost：8080（默认端口号），即可查看项目； 6. 在项目中可以使用Vue CLI提供的帮助语句和工具，来辅助进行开发和构建。 总之，创建一个Vue项目其实很简单，只要按照上述步骤操作即可。同时，对于想要深入学习Vue的同学们，不妨试着做一些小项目，从而加深自己对Vue框架的掌握和理解。 ### 回答3： 新建Vue项目可以通过Vue CLI来实现。首先需要安装Vue CLI，可以通过npm命令进行安装：npm install -g @vue/cli。 安装完成后，可以在命令行中输入vue create <project-name>来新建Vue项目。其中，<project-name>为项目名称，可以根据实际情况进行命名。 在新建项目的过程中，可以选择使用默认设置或者手动配置选项。手动配置选项包括选择所需的特性、添加插件等，可以按需选择。 新建完成后，可以通过npm run serve命令来启动开发服务器，实现实时预览和热重载功能。同时，可以进行开发和调试工作。在开发完成后，可以通过npm run build命令来进行打包和构建，生成用于生产环境部署的静态文件。 除了Vue CLI，也可以选择其他工具来新建Vue项目，例如使用Webpack等构建工具进行手动配置。但Vue CLI提供了一系列的优秀特性和插件，可以极大地提高开发效率和开发质量，并且具有良好的用户体验和社区支持。 总之，新建Vue项目需要掌握一定的技术和工具，可以借助Vue CLI等工具进行快速构建和开发，实现高质量的Vue应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值