专栏首页javascript艺术搭建vue2.0脚手架

搭建vue2.0脚手架

搭建vue脚手架

01

一. vue-cli初始化

1. 全局安装 vue-cli   npm install --global vue-cli 2. 创建一个基于 webpack 模板的新项目   vue init webpack my-project 3. 安装依赖   cd my-project   npm install (换源安装: npm install --registry https://registry.npm.taobao.org )

  npm run dev

02

二、脚手架目录

. ├ build/ # webpack配置文件 │ └ ... ├ config/ │ ├ index.js # 主要项目配置 │ └ ... ├ src/ │ ├ main.js # 应用入口文件 │ ├ App.vue # 主应用程序组件 │ ├ components/ # ui组件 │ │ └ ... │ └ assets/ # 模块资源(由webpack处理) │ └ ... ├ static/ # 纯静态资源(直接复制) ├ test/ │ └ unit/ # 单元测试 │ │ ├ specs/ # 测试spec文件 │ │ ├ index.js # 测试构建条目文件 │ │ └ karma.conf.js # 测试跑步者配置文件 │ └ e2e/ # e2e测试 │ │ ├ specs/ # 测试spec文件 │ │ ├ custom-assertions/ # e2e测试的自定义断言 │ │ ├ runner.js # 测试跑步脚本 │ │ └nightwatch.conf.js # 测试跑步者配置文件 ├ .babelrc # babel 配置 ├ .postcssrc.js # postcss 配置 ├ .eslintrc.js # eslint 配置 ├ .editorconfig # editor 配置 ├ index.html # index.html模板

└ package.json # 构建脚本和依赖关系

build/

此目录包含开发服务器和生产webpack构建的实际配置。 通常,您不需要触摸这些文件,除非您要自定义Webpack加载器,在这种情况下,您应该看看build / webpack.base.conf.js。

config/index.js

这是显示构建设置的一些最常见配置选项的主配置文件。 有关详细信息,请参阅开发期间的API代理和后端框架集成。

src/

这是你的大部分应用程序代码所在的位置。如何构建此目录中的所有内容,主要取决于您; 如果您使用Vuex,您可以查阅Vuex应用程序的建议。

static/

此目录是您不想使用Webpack进行处理的静态资源的一个逃生舱口。 它们将直接复制到生成webpack建立资产的同一个目录中。

有关详细信息,请参阅处理静态资产。

test/unit

包含单元测试相关文件。 有关详细信息,请参阅单元测试

test/e2e

包含e2e测试相关文件。 有关详细信息,请参阅端到端测试。

index.html

这是我们的单页应用程序的模板index.html。 在开发和构建期间,Webpack将生成资产,并将生成的资产的URL自动注入到此模板中以呈现最终的HTML。

package.json

包含所有构建依赖项和构建命令的NPM软件包元文件。

03

三. 安装额外的依赖包 1. 两种依赖包的安装方式   1.1 项目依赖包   npm install --save vue   1.2 开发依赖包   npm install --save-dev webpack 2. less依赖包   npm install --save-dev less less-loader 3. 网络请求axios依赖包   npm install --save axios 4. axios低版本浏览器补丁es6-promise依赖包   npm install --save es6-promise 5. 路由安装   npm install --save vue-router 6. 状态管理安装   npm install --save vuex 7. PC端组件库   npm install --save element-ui 8. 移动端组件库   npm install --save mint-ui 9. 上传服务器ssh2   npm install –save-dev ssh2 10. cookie封装库

  npm install --save js-cookie

04

四. 其他修改

4.1 开发环境的端口修改

修改/config/index.js

4.2 打包静态文件夹名称修改

修改/config/index.js

4.3 index.html文件自动注入代码压缩配置

修改/build/wepack.prod.config.js

sdzfgdhg

本文分享自微信公众号 - javascript艺术(gh_4e5484fd6b52),作者:javascript艺术

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-24

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue2.0搭建脚手架流程

    Vue.js是一套构建用户界面的渐进式框架。 Vue 只关注视图层,采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和...

    小周sri的码农
  • 适合初学者练手的vue小项目(附github源码)

    vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,如今也已经发展到3.0了,可能是因为这个框架可以提高工作效率,因此受到大家的追捧,在之前...

    王小婷
  • React脚手架搭建

    React 是目前公认的前端三大框架巨头之一,也是相对学习成本高框架之一,但是为了涨工资,还是多学习一点吧

    我乃小神神
  • Webpack+Vue2项目结构生成

    lpe234
  • 使用Vue3.0,我收获了哪些知识点(一)

    近期工作感觉很忙,都没有多少时间去写文章,今天这篇文章主要是将自己前期学习Vue3.0时候整理的一些笔记内容进行了汇总,通过对本文的阅读,你将可以自己完成Vue...

    用户1308196
  • Vue脚手架搭建项目

    ? Author ProsperLee <lcsshengsss@outlook.com>

    ProsperLee
  • 搭建自己的脚手架

    最近接手了一个内部配置运营平台,大概了解了代码结构之后,第一波优化就是搭建了一套脚手架。

    暂七师黑管手
  • vscode+Node搭建vue脚手架

    一路默认即可,安装完成之后win+r 打开cmd命令提示符,然后输入node -v 如果显示的是版本v12.16.3 这样的

    kirin
  • cssjshtml vue.js 搭建脚手架cli

    葫芦
  • Vue入门系列(一)Vue技术栈

    Vue.js是一套构建用户界面的UI框架,它专注于MVVM模型的ViewModel层,通过双向数据绑定把View层和Model层链接起来。

    娜姐
  • 项目脚手架搭建概要

    小胖
  • 为什么我不推荐你使用vue-cli创建脚手架?

    最近在知乎看到一个问题,原问题如下: “ 很奇怪,为什么现在能找到自己手动创建vue脚手架的文章非常少,而且大家似乎对webpack4的热情并不高,对于想基于v...

    闰土大叔
  • Vue博客实战---前后端环境搭建

    最近心血来潮在开发个人博客网站,刚好可以趁这个机会出一个系列文章讲讲前端界面的设计,后端业务逻辑的实现以及前后端的交互。具体的架构我是采用Vu...

    创译科技
  • 使用 Vue 脚手架搭建项目

    vue-cli 也是一个 npm 包,可以帮助我们快速搭建起 vue 项目的脚手架。

    Chor
  • webpack+vue搭建环境到发布

    1.1、去官网安装node.js( http://www.runoob.com/nodejs/nodejs-install-setup.html )

    javascript艺术
  • 【程序源代码】Vue开源项目库汇总

    最近在学习VUE,感觉确实不错的前端框架。但光学习基本有点太慢,时间太长,主要是为了项目上手使用,所以在网上找了找比较好的VUE框架开发的项目实例。分享给大家。...

    程序源代码
  • Vue脚手架搭建项目中的坑

    Vue 框架如同 Python 中的 Django 框架一样,让一切操作变得超级简单,只需在规定的目录下书写规定的代码即可,至于如何运作,框架自己搞定。此篇文章...

    小闫同学啊
  • DRF系列总结二:脚手架搭建

    本文会继续上一篇文章《DRF系列总结一:DRF是什么,要不要用?》,在Django基础工程的基础上,安装DRF并进行配置:比如统一接口返回格式、统一异常处理等,...

    高木工
  • React---使用react脚手架搭建项目

      第二步,切换到想创项目的目录,使用命令:create-react-app hello-react

    半指温柔乐

扫码关注云+社区

领取腾讯云代金券