利用脚手架 创建项目

最新推荐文章于 2024-04-30 18:04:42 发布
最新推荐文章于 2024-04-30 18:04:42 发布
阅读量405 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_59153556/article/details/120456572
版权

利用 vue 命令，创建一个项目，并启动webpack开发服务器

0、准备

全局安装@vue/cli模块包

#全局安装@vue/cli模块包

yarn global add @vue/cli
# OR
npm install -g @vue/cli

#查看`Vue`命令版本  
 vue -V

查看`Vue`命令版本   vue -V

1、创建项目 vue create vuecli-project

# vue和create是命令, vuecli-project是自己的文件夹名
vue create vuecli-project

  1. 创建项目 vue create vuecli-project
  2. 选择模板   Default ([Vue 2] babel, eslint)   可以上下箭头选择, 回车确定, 弄错了ctrl+c从第1步来
  3. 选择包管理器 Use Yarn   or   Use NPM

C:\Users\QYWF\Desktop>vue create vuecli-project

Vue CLI v4.5.13
? Please pick a preset: Default ([Vue 2] babel, eslint)

Vue CLI v4.5.13
✨  Creating project in C:\Users\QYWF\Desktop\vuecli-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.

success Saved lockfile.
Done in 159.65s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 24.20s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vuecli-project.
👉  Get started with the following commands:

 $ cd vuecli-project
 $ yarn serve

C:\Users\QYWF\Desktop>

4.、等待下载脚手架项目需要的依赖包。

5、终端切换脚手架项目下, 启动内置的==webpack热更新开发服务器==  

cd vuecil-project            yarn serve    或 npm run serve     启动本地热更新开发服务器


C:\Users\QYWF\Desktop>cd vuecli-project

C:\Users\QYWF\Desktop\vuecli-project>yarn serve

 6、出现绿色，就代表成功启动了

 7、在浏览器地址栏输入地址  localhost:8080 或192.168.151.91:8080/

2、拓展 

脚手架项目目录

vuecil-project         # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json # 依赖包列表
    ├── README.md    # 项目说明
    └── yarn.lock    # 项目包版本锁定和缓存地址

  1. main.js - 项目打包入口 - Vue初始化
  2. App.vue - Vue页面入口
  3. index.html - 浏览器运行的文件
  4. App.vue => main.js => index.html

 3、配置文件vue.config.js   （src并列处，项目根目录下 ）

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

修改了接口，从localhost:3000 打开

当yarn serve 开启服务器命令时会自动打开浏览器 页面

ctrl + c 停止当前命令   

yarn server 重新开启服务器

乆辰
关注
Vue脚手架搭建以及创建Vue项目流程
weixin_68658847的博客
04-25 3万+
Vue脚手架的创建以及用脚手架创建项目的全套流程
脚手架搭建项目（详解)
qq_57112519的博客
10-08 2293
一、什么是脚手架？ 在vue中 ，脚手架使用的是 ，vue-cli这个技术 脚手架，就是一个今后所写项目的一个基本的空框架 ，这个空框架中包含了 与项目业务无关的空框框 二、安装步骤 1、电脑上必须有node.js 建议安装淘宝镜像。 node下载地址：https://nodejs.org/zh-cn/ （安装成功后可使用 node -v 查看是否安装成功）。 淘宝镜像安装：npm config set registry https://registry.npm.taobao.org （使用命令行
使用脚手架（Vue-Cli）快速创建一个vue项目的步骤
qq_59808309的博客
01-22 6213
一、安装vue https://cn.vuejs.org/v2/guide/installation.html 二、先确定是否安装了node.js、npm和cnpm node.js的下载地址：Node.js NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编
使用脚手架创建单模块项目
tanhaichao的专栏
02-05 435
使用脚手架创建单模块项目 学习如何使用脚手架创建一个单模块项目。 本指南将引导您完成创建一个基于Leopard的单模块项目，可以了解到从Model、DAO、Service、Controller的代码划分，如何使用Jetty在本机测试、如何进行单元测试。 How to complete this guide 你可以从头开始并完成每一个步骤,或者您可以绕过你已经熟悉的基本设置步骤。无论哪种方式
Vue2 通过脚手架（cli）创建项目方式
weixin_45703831的博客
04-30 1783
【注意，创建的文件夹名字最好不要与项目名同名】
利用脚手架搭建项目
weixin_30301449的博客
07-13 210
第一步：打开命令行工具,在命令行中找到桌面cd Desktop 第二步：给项目起一个名字 vue create vue-app接着会让我们选择预设手动选择Manually select features 跳到另一个命令后选择Babel让浏览器能识别vue，ES6代码,接着选择In package.josn意思是将所有代码放入一个文件中 ,接着选择预设YES 起一个自己的名字。接着进入项目文件中 ...
Sprint Boot通过脚手架创建项目
zeng_xf的博客
06-22 242
通过idea Srping initializr脚手架工具创建项目，并选择web启动器，spring-web启动器 创建Servlet 方法一 通过注解创建Servlet 创建第一个servlet 首页创建包 创建servlet类 extents HttpServlet 添加@webServlet注解 在启动类中添加@ServletComponentSca513n 在srpint boot启动时会扫描@webServlet注解 package servlet; import javax.servl
react脚手架创建项目
qq_41051239的博客
02-22 2179
在mockData.js中引入mockjs，并写模拟的返回数据，第一个参数是接口，第二个是请求类型，第三个是一个函数，接收请求参数并处理之后返回数据。代码中通过规则模式匹配作代码识别和报告的插件化的检测工具，它的目的是保证代码规范的一致性和及时发现代码问题，提前避免错误发生。冲突情况，记得检查package.json和.eslintrc.js文件内容是否有引入版本不同导致的冲突情况。可以极大的提高项目中多人协作开发时的效率、代码的可读性以及可维护性。命令将配置完全暴露出来，但这是一个不可逆的操作，复杂的。
通过vue脚手架创建项目
weixin_45844109的博客
09-09 496
使用vue-cli脚手架搭建vue开发环境 安装全局vue-cli脚手架，用于帮助搭建vue框架的模板项目。 打开cmd，执行以下指令。 cnpm install vue-cli -g 安装vue脚手架 关闭cmd重新打开，执行以下命令，验证vue安装是否成功 vue vue -V 验证vue安装成功 或者如下： 使用webpack打包工具，启动vue项目 创建一个工作空间用于保存项目，比如本文使用D:\workspace\vs_workspace 打开cmd，通过cd指令进入该目录 进入
VUE——使用VUE脚手架创建项目
热门推荐
weixin_68567820的博客
06-20 1万+
Vue脚手架安装及配置
Vue2使用脚手架创建项目
codefan※的博客
07-18 2653
先解释一下关于脚手架的概念        可以理解为像我们盖房子，需要打牢地基，也就是做一些前提准备工作，例如webpack的配置文件、node一些包的下载等等，形成项目的基本构架，这样就大大提高了项目的开发效率。试想一下，如果在你想要写一个项目的时候，需要你自己配置这些东西，心态先崩掉 前提准备——脚手架安装 可以使用编译器的终端或者cmd：npm install @vue/cli(@version) -g 建议安装cli3以上，不然
Vue（一）：利用脚手架创建项目
sunny_jiangsu的博客
11-19 188
vue-cli安装 安装脚本 >npm install –global vue-cli >vue init webpack todolist 报错“vue不是内部或者外部命令”和解决 – 控制面板卸载nodejs – C:\Users\XXX\AppData下的npm和npm-cache删除 – 下载安装新的nodejs 错误解决后，执行下面命令 node –v ...
使用VueCLI脚手架创建项目
pany的博客
10-31 121
使用脚手架创建项目 安装脚手架 [VueCLI官网] (https://cli.vuejs.org/zh/guide/installation.html) 全局安装 npm install -g @vue/cli 项目创建，在项目目录运行cmd，输入命令 projectname为项目名称，项目名称好像不能用大写字母 vue create projectname 3、小黑窗选择 使用上下箭头选择，回车确认，这里选择了自定义配置 自定义配置选择，根据需求勾选，上下键与空格键操作（这里选择了
使用vue脚手架创建一个项目(一)
在无知中学习，在学习中成长，在成长中学习
09-07 7593
使用vue脚手架创建一个项目第一步:是否安装Vue CLI 的包第二步：检查版本是否正确或者是否安装成功第三步：创建一个项目第四步：预设置项目1.选择vue的版本2.x或者3.x2.选择代码校验第五步：启动项目1.启动报错2.报错3.启动成功 第一步:是否安装Vue CLI 的包 按住wins+r,打开命令行，输入下面命令 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-c
VUE实战之通过脚手架搭建项目
qq_37820460的博客
01-11 316
未经博主同意，不得以任何形式转载、复制、编辑或发布本文 一、使用VUE的原因 1.vue的优点 体积小：压缩后33k； 更高的运行效率； 双向数据绑定； 生态丰富、学习成本低。 二、安装 1.开发工具 推荐VSCode，点击前往官网下载 2.环境准备 2.1 nodeJs：点击前往官网下载 下载后解压并安装，安装步骤请另行查阅资料，本文不再赘述。 安装好之后在cmd窗口中执行node -v检验...
使用vue脚手架创建项目
weixin_46375001的博客
02-26 210
作为一个前端新手，学习一个前端框架是必要的，这里给大家介绍一下怎么安装vue脚手架 首先vue要node的环境，我们需要先安装node，nodejs中文官网选择稳定版下载，一步一步安装就行，安装完成后window+r 输入cmd 在终端输入node -v 看到版本号就说明安装成功，注意，node版本不要太低，也不要太高，太低会有兼容性的问题，太高会有未知的bug，安装官方推荐的稳定版就好 安装 n...
利用脚手架创建vue项目step by step
weixin_42141454的博客
11-15 815
一、 环境准备 前端开发必需的两个工具 1.node node.js 官网地址，可以借助nvs安装 命令窗口输入node -v 查看版本号 2.npm npm 官网地址 命令窗口输入npm -v 查看版本号 3.淘宝镜像 淘宝镜像 官网地址 npm是外网工具，因此对于很多不能翻墙的用户来说，下载依赖可能会比较慢，淘宝镜像是国内公司复刻npm的镜像，方便用户快速下载依赖。 打开命令窗口安装: npm install -g cnpm --registry=https://registry...
Vue学习—详解利用脚手架搭建项目
xun__xing的博客
09-11 527
利用脚手架搭建项目一、利用脚手架搭建项目1.安装@vue/cli2.使用命令搭建项目（推荐）3.使用图形界面搭建项目4.删除配置 一、利用脚手架搭建项目 1.安装@vue/cli node 版本要求： >8.9，推荐使用8.11.0 +。 关于旧版本： 如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x)，那么需要先卸载掉。 运行：npm uninstall vue-cli -g 或 yarn global remove vue-cli。 安装之后，可以在命令行中访问vue命令。 检
利用脚手架创建vue项目以及vue项目的基本使用
m0_62796616的博客
12-18 1363
vue element-ui axios ajax vueRouter vuex
利用脚手架创建vue2项目
最新发布
01-21
### 如何使用 Vue CLI 创建 Vue 2 项目 为了创建基于 Vue 2 的新项目，需先确认已全局安装 `@vue/cli` 工具。这可以通过执行命令 `npm install -g @vue/cli` 来完成[^2]。 一旦安装完毕，验证其正确性的方法是输入 `vue --version` 命令；如果显示了版本号，则表明安装成功[^1]。 接下来进入实际项目的创建工作： #### 安装特定版本的 Vue CLI (可选) 对于希望确保兼容性或有特殊需求的情况，可以指定安装某个具体版本的 Vue CLI，比如4.1.1版： ```bash npm install -g @vue/cli@4.1.1 ``` #### 初始化一个新的 Vue 2 项目 利用交互式的命令行界面来启动新的 Vue 项目构建过程： ```bash vue create my-vue2-project ``` 在此过程中会提示选择一系列配置选项，在这里应特别注意选择 Vue 版本的地方，务必挑选 Vue 2.x 作为目标框架版本。 #### 配置 Uni-app 项目（针对特定场景） 当涉及到 uni-app 类型的应用开发时，除了上述基本步骤外，还需额外关注一些细节设置。例如，在项目根目录下的 `vue.config.js` 文件里加入必要的依赖转换规则： ```javascript module.exports = { transpileDependencies: ['uview-ui'] } ``` 此操作是为了让某些组件库能够正常工作于当前环境中[^3]。 另外一种方式则是直接采用预设模板快速搭建 uni-app 应用程序结构： ```bash vue create -p dcloudio/uni-preset-vue my-uniproject ``` 这种方式能更加快捷地获得一个已经适配好 uni-app 平台的基础工程架构[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值