[20190614]webpack+vue学习记录

本文记录一些学习webpack+vue相关的知识点,方便以后查阅,添加或修改

1. 初始化vue项目的代码结构

build--项目依赖包配置信息

config--项目配置文件

  dev.env.js--开发环境配置文件

  index.js--基础配置文件

  prod.env.js--线上环境配置文件

mode_module--依赖包文件

src--项目源码

  assets--项目图片资源

  components--项目小组件

  router--项目路由

  App.vue--项目根组件文件

  main.js--项目入口文件

static--静态资源(能被外部直接访问的数据文件)

.babelrc--babel语法解析器语法转换配置文件

.editorconfig--编辑器语法配置文件

.eslintignore--指定哪些文件不要eslint语法检测

.eslintrc.js--eslint语法检测配置文件

.gitignore--指定哪些文件不要git提交

.postcssrc.js--postcss配置文件

index.html--项目首页文件

package-lock.json--依赖包版本信息文件

package--依赖包信息文件

README.md--说明文件

2. 安装cli/创建cli项目/安装依赖包

npm install --global vue-cli
vue init webpack projectname
npm install packagename --save

3. 目录缩写

将一些常用的目录进行缩写:

打开build文件夹webpack.base.conf.js文件,在项目中使用‘~styles‘代替‘src/assets/styles‘

resolve: {
  ‘styles‘: resolve(‘src/assets/styles‘)
}

原文地址:https://www.cnblogs.com/jimfigo/p/11022065.html

时间: 2024-10-05 13:35:06

[20190614]webpack+vue学习记录的相关文章

【前端小小白的学习之路】vue学习记录④(路由传参)

通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中我们已经有两个页面(Helloworld.vue&Hello.vue),现在我准备往Hello.vue里面添加3个链接,分别对应两种情况的跳转.  第一步:在原来的Hello.vue里添加路由链接跳转的代码(见第38-44行代码),添加后的Hello.vue代码如下: 1 <template&g

vue学习记录:vue引入,validator验证,数据信息,vuex数据共享

最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <template> </template> <script> </script> <style> </style> 要引入其他vue ,需要 import <template> <div> <Header></

【前端小小白的学习之路】vue学习记录(vue-cli脚手架构建项目结构)

我们直接从vue的工程化开始入手. 在这里用git命令行搭建项目环境.(当然直接cmd命令行下也是一样的) git下载安装地址:https://www.git-scm.com/download/win git使用教程:http://www.cnblogs.com/havenshen/p/3493522.html git常用命令整理:http://www.cnblogs.com/luxiaoxing/p/7545403.html 1.node安装. node下载安装地址:http://nodejs

Vue 学习记录&lt;1&gt;

1.环境搭建:(前提node.js搭建) # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖 $ cd my-project $ npm install $ npm run dev 2.

vue学习记录(一)—— vue开发调试神器vue-devtools安装

网上有些贴子少了至关重要的一步导致我一直没装上, 切记!!install后还需build,且install和build都在vue-devtools文件夹内执行 github下载地址 点击跳转 具体步骤: 第一步:找到vue-devtools的github项目,并将其clone到本地 vue-devtools git clone https://github.com/vuejs/vue-devtools.git 第二步:安装项目所需要的npm包(进入vue-devtools编译项目文件目录,很重要

Vue 学习记录(一)

环境准备 node.js vue-cli 安装配置环境 1.下载node.js,使用默认配置安装 . 2.使用npm命令安装国内下载镜像(可选) cmd: npm install  -g  cnpm  --registry=https://registry.npm.taobao.org tips:在命令行输入 npm -v 或cnpm -v 查看npm或cnpm 版本 3.全局安装vue-cli (vue-cli3.x 搭建的项目界面更为简洁,查看vue-cli 3.x 新特性) cmd: cn

【前端小小白的学习之路】vue学习记录②(hello world!)

接着上篇vue-cli脚手架构建项目结构建好项目之后,就开始写个“hello world!”吧~~~ vue玩的都是组件,所以开发的也是组件. 1.新建helloworld.vue.(删除Hello.vue)代码如下: <!--模板部分--> <template> <div class="container"> <h1>hello,world!</h1> <p>{{test}}</p> </div

【前端小小白的学习之路】vue学习记录⑤(组件通信-父与子)

今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之间肯定是有相互关系的,我们就称这种现象叫组件通信. 比如父组件发生了某项改变,子组件会跟着相应发生变化:反过来,子组件有了某种改变,父组件有时也会随之做出调整.那么这种现象我们称之为双向数据流动. 然而,vue的作者敏锐的认识到,双向数据流带来便捷的同时,也存在着极大的安全隐患. 父组件将变化传递给

Vue学习记录-画页面

webstorm 因为之前开发ReactNative的时候,选择了webstorm,这回转战Vue,自然还是用它.如果什么也不做的话,打开Vue工程,编辑区域基本上没有语法高亮.怎么办呢? 安装插件(以mac版本为例,window下面应该大同小异) 1. 打开偏好设置,从左边找到Plugins 2. 点击Browse repositories...,然后搜索Vue,进行安装 3. 添加Vue模板 <template> </template> <script> expor