Vue2使用脚手架创建项目

先解释一下关于脚手架的概念
       可以理解为像我们盖房子,需要打牢地基,也就是做一些前提准备工作,例如webpack的配置文件、node一些包的下载等等,形成项目的基本构架,这样就大大提高了项目的开发效率。试想一下,如果在你想要写一个项目的时候,需要你自己配置这些东西,心态先崩掉


前提准备——脚手架安装

可以使用编译器的终端或者cmd:npm install @vue/cli(@version) -g
建议安装cli3以上,不然以后还得去升级
至于cli2的一些模板通过执行:npm install @vue/cli-init(@version) -g就可以拉取得到

项目创建

执行命令:npm init webpack 项目名称 或 npm create 项目名称
第一个是Vuecli2的创建命令,第三个是Vuecli3的创建命令
注意:项目名称不要用中文,亲测心态大崩!!!项目创建流程
这是项目的目录树
目录树

### 使用 Vue CLI 创建基于 Vue 2项目 为了创建一个基于 Vue 2项目,需先理解 Vue CLIVue 的关系。Vue CLI 是一个脚手架工具,能够快速生成一套完整的前端开发框架,并支持集成多种第三方插件来扩展更多功能;而 Vue 则是一个渐进式的 JavaScript 框架,允许开发者根据需求灵活选用其特性[^2]。 #### 准备工作 确保已安装 Node.js 及 npm 或 yarn 工具链之后,可以通过以下命令全局安装最新版本的 Vue CLI: ```bash npm install -g @vue/cli # 或者使用yarn yarn global add @vue/cli ``` #### 初始化新项目 通过 `vue create` 命令启动交互式向导来设置新的 Vue 项目,在提示选择 Vue 版本时指定为 Vue 2.x[^3]: ```bash vue create my-vue2-project ``` 在随后的选择界面中,可以根据实际需要挑选预设配置或是手动选取特性组合。对于希望兼容旧浏览器环境的应用来说,建议启用 Babel 编译器以实现语法转换。另外,如果计划采用单页面应用架构,则应加入 Router 支持以便管理不同视图间的导航逻辑[^4]。 完成上述选项设定后,继续按照屏幕上的指示操作直至构建过程结束。此时便拥有了一个基于 Vue 2 构建的基础模板工程。 #### 启动本地服务器 进入刚建立好的项目目录并执行如下命令开启内置的服务端监听实例,方便后续调试与测试用途: ```bash cd my-vue2-project npm run serve # 如果是用yarn则运行下面这句 # yarn serve ``` 当控制台输出类似于 `App running at:` 字样的信息时说明服务已经正常运作起来,可通过访问给出地址查看效果。 #### 配置细节调整 针对某些特定场景下的优化措施,例如去除 URL 中的 hash 符号(`#`)、更改样式表处理机制等都可以在此阶段依据个人偏好做出相应修改。具体做法是在项目根路径下找到 `.env` 文件或者编辑 package.json 内的相关字段来进行定制化参数赋值。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值