ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue-cli 工程化安装(基于3.0)

2022-05-11 16:02:57  阅读:194  来源: 互联网

标签:npm vue cli app yarn 组件 工程化


对于vue3.0 要使用npm 上可用的vue cli v4.5 作为 @vue/cli(也就是vue/cli 版本必须在4.5以上才能满足vue3.0)

// 1. 全局安装 @vue/cli
// yarn 安装:yarn global add @vue/cli
// npm 安装: npm install -g @vue/cli

// 2. 之前已安装过vue-cli 可升级新版
// 2-1. npm update -g @vue/cli    (升级到最新)
// 2-2. vue-V    (查看当前版本)

// 3. 之前vue2.0 是用webpack构建项目,vue3.0退出 vite (是一个web开发构建工具,通过其原生ES 模块导入方式,可以实现闪电般冷服务器启动)

// 4. 快速创建项目:
// npm:
// 4-1. npm init @vitejs/app 项目名称(注意不能驼峰命名,可使用-中划线)
// 4-2. cd 项目名称     (切换到项目路径)
// 4-3. npm install     (安装依赖)
// 4-4. npm run  dev     (启动项目)

// yarn:
// 4-1. yarn create @vitejs/app 项目名称(注意如上)
// 4-2. cd 项目名称
// 4-3. yarn
// 4-4. yarn dev
// yarn build   (打包)


// 没有用过yarn的可以自行了解去安装下yarn
// vite 安装:
// npm init vite@latest
// yarn create vire

 

// 生成的项目文件结构拆解(基于yarn创建)

// public  全局的公共的静态的文件,不需要编译的(例如网页的图标)
// *gitignore   项目的git管理配置
// index.html   所有模块页面的汇总整合(此处是单页面应用原理)
// package.json   项目的描述(所有依赖的名称和版本,也可以说是依赖管理文件)
// vite.config.js   作用和webpackage 一样,打包构建(配置代理,https 等底层构建配置的改写)
// yarn.lock   版本锁定
// src   所有的业务代码目录结构创建在此(需要编译的文件)

// vue 是单页面应用程序最终浏览器加载的是index.html 因为vue 是组件化开发,所以在vue中最大的组件(项目级组件)是 src/app.vue 后期会通过路由的形式将一些页面级的组件汇总到 app.vue
// 然后app.vue 会输出给 src/main.js 然后main.js 会把整体的组件模块放到 index.html 中
// src/assets 文件(放置图片,音频视频等静态文件)
// components(公共的局部组件放置)
// pages(功能页面)

 

标签:npm,vue,cli,app,yarn,组件,工程化
来源: https://www.cnblogs.com/qianduan-lucky/p/16244924.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有