vue脚手架的搭建及说明

创建流程:

1.新建一个项目文件夹,打开文件夹输入cmd打开小黑窗

2.在黑窗口输入vue create 项目名(project02),点击回车创建一个项目

 

3.创建成功后会弹出

Use https: //registry.npmmirror.com for faster installation?(Y/n)-

(使用https://Registry y.npmmirror.com来加快安装速度?(y/n)-)

 这时我们选择Y(yes)

4.然后按上下键进行选择,选择自定义,也就是最后一个

 5.选择项目设置 按上下键切换 按空格键选择或者取消选择 最终我们选择图片上的四个 然后点击回车键

6.下一步选择Vue.js的版本 我们选择2.X

7.下一步问你的路由模式是否需要选择history模式 我们选择hash模式 所以输入n

 8.这里选择css预处理器 我们选择less

9.这里询问你是把设置另外放在一个文件夹里 还是放在package.json文件夹里,我们选择放在文件夹里

 10.这里问你是否把刚刚的设置都保存下来 以后的文件也能有,这里我们选择y,然后给它取一个名字,下一次就可以直接选择这个

11.显示以下界面就说明项目已经创建好了,接下来我们依次运行蓝色的两行代码cd project02;npm run serve

 12.复制http://localhost:8080/并在浏览器打开这个网址就完成了项目的创建

 

脚手架目录分析

### Vue CLI 项目初始化与配置 Vue CLI 是一个官方提供的脚手架工具,用于快速构建基于 Vue.js 的开发环境。它提供了丰富的插件和预设功能来帮助开发者高效地创建现代前端应用。 #### 安装 Vue CLI 要使用 Vue CLI 创建项目,首先需要安装 Vue CLI 工具。可以通过 npm 或 yarn 来全局安装 Vue CLI: ```bash npm install -g @vue/cli ``` 或者通过 Yarn 进行安装: ```bash yarn global add @vue/cli ``` 确认安装成功可以运行以下命令查看版本号[^1]: ```bash vue --version ``` #### 初始化 Vue 项目 安装完成后,可以使用 `vue create` 命令来初始化一个新的 Vue 项目。执行如下命令: ```bash vue create my-project-name ``` 这会启动交互式的向导界面,允许选择不同的特性(如 TypeScript、Router、Vuex 等),并自定义项目的配置文件[^2]。 如果希望跳过手动配置过程,可以直接指定默认设置: ```bash vue create --default my-project-name ``` #### 配置 Vue CLI 项目 在项目创建完毕后,进入项目目录并通过编辑 `vue.config.js` 文件来自定义 Webpack 和其他构建选项。如果没有该文件,则可以在根目录下新建一个名为 `vue.config.js` 的文件。以下是常见的配置项示例: ```javascript module.exports = { publicPath: './', // 设置静态资源路径 outputDir: 'dist', // 构建输出目录名称 lintOnSave: false, // 是否开启 ESLint 检查 devServer: { // 开发服务器配置 port: 8080, open: true // 自动打开浏览器窗口 } }; ``` 完成上述操作之后,在终端输入以下指令即可启动本地服务进行调试[^3]: ```bash npm run serve ``` #### 使用 Vue UI 图形化管理工具 除了命令行方式外,还可以利用图形化的 Vue UI 工具来进行更直观的操作。只需简单运行下面这条语句就可以启动 GUI 接口页面: ```bash vue ui ``` 此方法适合初学者以及那些偏好视觉辅助的人群[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值