vue创建一个cli项目

最新推荐文章于 2024-08-25 18:02:18 发布
最新推荐文章于 2024-08-25 18:02:18 发布
阅读量246 收藏 2
点赞数
文章标签： vue npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52139881/article/details/113870605
版权

1.安装node.js

  • 从 node 官网 直接下载（可以自己调整一个环境目录）一直安装即可（会自动配置 path 环境变量，不像某些 Java 害 搞半天），安装后，打开命令行工具（win+R），输入 node -v 查看版本，出现版本号则成功。注意：（下载完完 node 是自带 npm 的，可以使用 npm -v 查看）。
    在这里插入图片描述
  • 但是我们还要安装 npm 国内的镜像 - cnpm，因为有些资源被屏蔽或是国外的原因。
    可以打开文件管理器查看隐藏目录，要先将 查看中的选项确认。
    在这里插入图片描述
  • 就会发现 C盘->用户 中多出一个 更淡的 AppData 隐藏目录。注意：里面东西尽量不要乱删 很多环境都在这里面。
    在这里插入图片描述
  • 可以根据 上面路径查看 npm 中的包，刚开始是什么都没有的 执行下面语句后会 多出 node_modules 等 其他文件。
npm install cnpm -g // 两条语句都行 下面那条 下载更快
npm install -g cnpm --registry=http://registry.npm.taobao.org

  • 也可以通过 使用 cnpm -v 查看版本号。
    在这里插入图片描述
    但是如果 安装 node 时，切换了 路径，这里面不会出现包 ，可以到自己路径中去查看。
    在这里插入图片描述

  • 这里也可以使用 【yarn打包工具】 是国内的打包工具，命令比 npm 更加高效。

2.安装 vue-cli (要全局安装 -g)

cnpm install vue-cli -g

  • 时间可能有点长，如果出现 error 则安装失败，但是 nojs 十分智能，如果报错会给出提示，按照提示敲就完事了。

  • 可以使用 vue list 查看命令。一般使用 webpack 创建。

3.创建 vue-cli 项目

  • 可以找到 一个目录 打开 cmd 这里有两种推荐方式
    1.直接在上方输入 cmd 即可在这里插入图片描述
    2. 空白处 右键+shift 会出现一个蓝色框 相当于cmd 升级，自行了解。
    在这里插入图片描述
    可以根据 vue-cli 官网 来创建 项目。
vue create hello-world

在这里插入图片描述

  • 上面两个是自动创建，可以选择第三个手动创建。
    在这里插入图片描述

  • 上下移动， 空格确认选择。

  • Choose Vue version：选择Vue的版本。
    Babel：是否使用babel。
    TypeScript：支持使用TypeScript编写源码。
    Progressive Web App(PWA)：是否支持渐进式网页应用（PWA）。
    Router：是否支持vue-router。
    Vuex：是否支持vuex。
    CSS Pre-processors：是否支持CSS预处理器。
    Linter/Formatter：是否支持代码风格检查和格式化。
    Unit Testing：是否支持单元测试。
    E2E Testing：是否支持E2E测试。
    在这里插入图片描述
    选择 vue.js 版本
    在这里插入图片描述

  • Pick a linter / formatter config: (Use arrow keys)
    翻译：选择代码检查和格式化配置。

  • ESLint with error prevention only
    ESLint + Airbnb config
    ESLint + Standard config
    ESLint + Prettier
    TSLint (deprecated)
    这几个选项的具体情况稍后我们用专门的文章进行说明，此处我们就先选择 ESLint + Standard config 选项，然后按下回车键。
    在这里插入图片描述
    Pick additional lint features: (Press to select, to toggle all, to invert selection)
    翻译：选择附加的语法检查配置，可以按下空格键选中选项，按下a键选择所有，按下i键进行反选，即选中的取消选中，没有选中的选中。

  • Lint on save：保存时检查。
    Lint and fix on commit：提交时检查和修复。
    在这里插入图片描述

  • Where do you prefer placing config for Babel, ESLint, etc.?
    翻译：你更喜欢把Babel、ESLint等的配置放到哪里？

  • In dedicated config files：在独立的配置文件中。
    In package.json：统一放在package.json文件中。
    根据项目情况进行选择，此处我们选择 In package.json 选项
    然后问你是否保存
    Save this as a preset for future projects? (y/N)
    翻译：是否将此保存为将来项目的预置？
    如果保存的话，将来在创建项目的时候，就可以按照该配置进行创建了。这个大家可以自行尝试。
    如果需要保存，在输入小写y，不需要的话输入大写N

最后命名就行了。

4.运行

在这里插入图片描述
根据提示 输入语句 即可运行。
在这里插入图片描述
将地址放到浏览器中运行
在这里插入图片描述

qq_52139881
关注
vue-cli搭建项目
weixin_30815427的博客
08-20 1260
一、全局化安装cnpm 其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，个人觉得使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以还是觉得使用cnpm稳一点。 npm install cnpm -g --registry=https://registry.npm.taobao.org （1）全局安装 vue-cli ，在命令提示窗口执行： cnpm in...
vue使用vue-cli快速创建工程
01-19
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 -g代表全局安装。 i就是install的缩写。 其中webpack-simple代表模板的名称。vue-todos是你给自己的项目起的名称，这个随便起...
vue-cli创建项目
weixin_68160847的博客
01-13 386
打开终端，进入项目文件夹，然后运行项目（npm run serve）
vue-cli搭建项目过程
最新发布
2302_78078800的博客
08-25 1935
前端js框架 vue-cli的使用
使用vue-cli创建项目
梦风心雨的博客
01-05 5258
1、安装node 1、进入node官网 https://nodejs.org/zh-cn/ 2、下载Windows安装包， 双击安装包安装，一路无脑next 2、创建项目 1、安装完成后，在Windows终端使用node -v测试node是否安装成功，使用npm -v测试自带的npm是否可用。 2、使用npm install -g @vue/cli命令安装vue-cli。 3、使用vue create hello-world命令新建一个vue-cli项目 4、使用npm run serve就可以运行创
vue-cli 创建项目
cc_Crt的博客
08-14 247
概念介绍 | Vue CLIvue-cli 是搭建vue项目的工具。既可以采用命令创建vue项目也可以采用可视化界面创建vue项目!（意思把别人已经写好了的空壳项目代码搬过来使用）vue-cli 是构建vue项目的脚手架作用：主要是提供快速构建VUE项目的服务。...
使用Vue-CLI创建Vue项目
huangfuyk.的博客
04-21 6626
在看本文之前，请确保电脑上已经装了node，关于node的安装和使用可参考node的安装与使用专栏 1 . 利用Vue-CLI初始化构建Vue项目时，我们将会获得一个初始的文件夹结构，如下所示： 2 . 安装Vue-CLI npm install -g @vue/cli 或 yarn global add @vue/cli 例： 3 . 使用vue --version或vue -V指令，查...
Vue使用vue-cli创建项目
01-19
vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：https://github.com/Aleczhang1992/my-vue-project/tree/dev 一、步骤 1.要求已安装Node.js (>=4.x, 6.x ...
vuecli创建项目vuecli创建项目.png
02-26
vuecli创建项目 vuecli创建项目
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
10-17
使用vue-cli3创建项目非常简单，可以通过命令行运行`vue create <project-name>`来创建一个新的项目，其中`<project-name>`是你想要创建的项目的名称。创建项目时，系统会提示选择默认预设或手动选择功能，如Linter/...
创建一个vue.cli项目
weixin_46853502的博客
10-10 357
1.以【管理员】的身份进入cmd 2.进入需要创建项目的位置，（本次创建在 D盘的vue目录下，需要提前创建好目录的位置） 3.输入命令vue init webpack vueTest1 其中 vueTest1为创建的项目名 #1、首先需要进入到对应的目录 cd D:\vue #2、这里的vueTest1是顶日名称，可以根据自己的需求起名 vue init webpack vueTest1 如下图所示，正在创建项目 需要稍微等待一下，如果卡在某个界面或者下载过慢可以考虑使用淘宝的镜...
使用vue-cli3新建一个项目，并写好基本配置
weixin_34199335的博客
11-20 470
1. 使用vue-cli3新建项目：https://cli.vuejs.org/zh/guide/creating-a-project.html 注意，我这里用gitbash不好选择选项，我就用了基本的cmd（系统命令提示符）：上下箭头和空格键可控制选项。 详细步骤： （1）vue create init： 这里我选择了自定义配置 （2）使用上下箭头和空格进行选择，我这里选...
Vue Cli创建项目
NeilNiu
12-31 282
首先创建一个文件夹，然后cd到文件夹的根目录上，使用命令 vue create vue-demo 选个Manually select features ，手动去选择一些功能 默认选中babel，帮助转换es6的一些语法，Linter/Formatter，限制我们使用的对应的语法，初学阶段可以不使用，（空格键选中和不选中） 选择babel后 点击回车键， In package.json 选择这个,类似pom文件的功能 选择n 不保存 创建成功后，有这两个命令 cd vuecli-demo..
Vue CLI创建项目
onepiece1991的博客
06-28 336
Vue CLI创建项目配置
Vue-cli创建项目
qq_45908140的博客
04-25 138
vue-cli新建项目
vue-cli创建一个vue项目
07-27
你可以按照以下步骤使用 vue-cli 创建一个 Vue 项目： 1. 首先，确保你已经安装了 Node.js。你可以在终端中运行 `node -v` 来检查是否已经安装。 2. 安装 Vue CLI。在终端中运行以下命令： ``` npm install -g @vue/cli ``` 3. 创建一个新的 Vue 项目。在终端中运行以下命令： ``` vue create 项目名称 ``` 这里的 "项目名称" 是你想要给你的项目起的名字，你可以自定义。 4. 运行上面的命令后，Vue CLI 会提示你选择一些预设配置。你可以选择默认配置，也可以手动选择所需的配置。 5. 安装项目依赖。进入到项目目录中，运行以下命令： ``` cd 项目名称 npm install ``` 6. 启动开发服务器。运行以下命令： ``` npm run serve ``` 这将启动一个本地开发服务器，你可以在浏览器中访问 `http://localhost:8080` 来查看你的应用程序。 这样，你就成功创建了一个 Vue 项目并启动了开发服务器。你可以根据需要修改项目中的代码和配置。祝你编写愉快！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值