专栏首页codingvue 使用 cli 工具构建项目

vue 使用 cli 工具构建项目

初始化项目

安装 cli 命令工具

$ cnpm install -g @vue/cli @vue/cli-init
$ vue -V
3.12.0

构建一个名为 myapp 的项目

$ vue init webpack myapp
? Project name myapp
? Project description A Vue.js project
? Author itshutong <2720204561@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "myapp".


# Installing project dependencies ...

启动项目

$ cd myapp
$ npm run dev

项目结构介绍

├── build               webpack打包相关配置文件目录
├── config              webpack打包相关配置文件目录
├── node_modules         第三方包
├── src                 项目源码(主战场)
│   ├── assets           存储静态资源,例如 css、img、fonts
│   ├── components       存储所有公共组件
│   ├── router           路由
│   ├── App.vue          单页面应用程序的根组件
│   └── main.js          程序入口,负责把根组件替换到根节点
├── static              可以放一些静态资源
│   └── .gitkeep         git提交的时候空文件夹不会提交,这个文件可以让空文件夹可以提交
├── .babelrc             配置文件,es6转es5配置文件,给 babel 编译器用的
├── .editorconfig        给编辑器看的
├── .eslintignore         给eslint代码风格校验工具使用的,用来配置忽略代码风格校验的文件或是目录
├── .eslintrc.js         给eslint代码风格校验工具使用的,用来配置代码风格校验规则
├── .gitignore           给git使用的,用来配置忽略上传的文件
├── index.html           单页面应用程序的单页
├── package.json         项目说明,用来保存依赖项等信息
├── package-lock.json     锁定第三方包的版本,以及保存包的下载地址
├── .postcssrc.js         给postcss用的,postcss类似于 less、sass 预处理器
└── README.md            项目说明文档

原文:https://www.itshutong.com/350.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 了解vue.js的生命周期函数四个生命周期函数两个运行中的事件

    章鱼喵
  • python模拟狙击手射击恐怖分子

    章鱼喵
  • hexo搭建个人博客

    搭建个人博客有很多种方式,最老牌的当属wordpress,功能丰富,但过于笨重。我想要的只是最简单的显示文章以及搜索功能,当然,样式要简洁漂亮,而且必须支持ma...

    章鱼喵
  • Vue 全家桶、原理及优化简议

    使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM(Mod...

    李艺
  • vue 开发常用工具及配置一

    访问 nodejs.org 下载。这是必不可缺的环境之一。下载最新的 LTS 版本。LTS 代表长期维护,通常比较稳定。

    李艺
  • 神经网络模型实现手写字分类求解思路

    《实例》阐述算法,通俗易懂,助您对算法的理解达到一个新高度。包含但不限于:经典算法,机器学习,深度学习,LeetCode 题解,Kaggle 实战。期待您的到来...

    企鹅号小编
  • 神经网络模型解决分类问题的思考方式

    昨天介绍了神经网络的基本模型结构,可分类为前向传播神经网络,循环神经网络(RNN);介绍了神经网络中,梯度下降的原理推导,以小球下坡作为实例阐述梯度下降;分析了...

    人工智能的秘密
  • 深度学习|神经网络模型实现手写字分类求解思路

    请点击上面公众号,免费订阅。 《实例》阐述算法,通俗易懂,助您对算法的理解达到一个新高度。包含但不限于:经典算法,机器学习,深度学习,LeetCode 题解,...

    double
  • Vue.js动画在项目使用的两个示例

    vue.js在2016年大放异彩,我们 Qlippie 直播平台进来使用vue.js开发了一些页面,效果拔群,在这里跟大家分享在项目中用vue.js开发的两个动...

    李萌
  • 聊聊rocketmq的AllocateMessageQueueAveragely

    本文主要研究一下rocketmq的AllocateMessageQueueAveragely

    codecraft

扫码关注云+社区

领取腾讯云代金券