其他分享
首页 > 其他分享> > vue-cli 工程化安装(基于3.0)

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

作者:互联网

对于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