1.什么是vue-cli

  vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;

  预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;

主要功能:

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

2.需要的环境

确认nodejs是否安装成功:

  • cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
  • cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!

安装Node.js淘宝镜像加速器(cnpm):

 # -g 就是全局安装
npm install cnpm -g # 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

安装vue-cli:

 cnpm install vue-cli -g

 # 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序,通常我们选择 webpack
vue list

3.第一个vue-cli应用程序

1.在文件夹中使用cmd创建一个名为myvue的vue项目并用webpack打包工具打包

 # 这里的 myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue

说明:

  • Project name:项目名称,默认 回车 即可
  • Project description:项目描述,默认 回车 即可
  • Author:项目作者,默认 回车 即可
  • Install vue-router:是否安装 vue-router,选择 n 不安装(后期需要再手动添加)
  • Use ESLint to lint your code:是否使用 ESLint 做代码检查,选择 n 不安装(后期需要再手动添加)
  • Set up unit tests:单元测试相关,选择 n 不安装(后期需要再手动添加)
  • Setup e2e tests with Nightwatch:单元测试相关,选择 n 不安装(后期需要再手动添加)
  • Should we run npm install for you after the project has been created:创建完成后直接初始化,选择 n,我们手动执行;运行结果!

2.初始化并运行myvue项目

 cd myvue
npm install
npm run dev

3.安装并运行成功后在浏览器输入:http://localhost:8080

4.分析vue-cli目录结构

  • build 和 config:WebPack 配置文件
  • node_modules:用于存放 npm install 安装的依赖文件
  • src: 项目源码目录
  • static:静态资源文件
  • .babelrc:Babel 配置文件,主要作用是将 ES6 转换为 ES5
  • .editorconfig:编辑器配置
  • eslintignore:需要忽略的语法检查配置文件
  • .gitignore:git 忽略的配置文件
  • .postcssrc.js:css 相关配置文件,其中内部的 module.exports 是 NodeJS 模块化语法
  • index.html:首页,仅作为模板页,实际开发时不使用
  • package.json:项目的配置文件

    • name:项目名称
    • version:项目版本
    • description:项目描述
    • author:项目作者
    • scripts:封装常用命令
    • dependencies:生产环境依赖
    • devDependencies:开发环境依赖

5.分析src目录

src目录:项目的源码目录,所有代码都会写在这里

main.js:项目的入口文件,我们知道所有的程序都会有一个入口

 // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})

说明:

  • mport Vue from 'vue':ES6 写法,会被转换成 require("vue"); (require 是 NodeJS 提供的模块加载器)
  • import App from './App':意思同上,但是指定了查找路径,./ 为当前目录
  • Vue.config.productionTip = false:关闭浏览器控制台关于环境的相关提示
  • new Vue({...}):实例化 Vue

    • el: '#app':查找 index.html 中 id 为 app 的元素
    • template: '<App/>':模板,会将 index.html 中 <div id="app"></div> 替换为 <App />
    • components: { App }:引入组件,使用的是 import App from './App' 定义的 App 组件;

App.vue:index.html中调用的组件

 <template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template> <script>
import HelloWorld from './components/HelloWorld' export default {
name: 'App',
components: {
HelloWorld
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

说明:

  • template:HTML 代码模板,会替换 <App /> 中的内容
  • import HelloWorld from './components/HelloWorld':引入 HelloWorld 组件,用于替换 template 中的 <HelloWorld/>
  • export default{...}:导出 NodeJS 对象,作用是可以通过 import 关键字导入

    • name: 'App':定义组件的名称
    • components: { HelloWorld }:定义子组件

HelloWorld.vue:

 <template>
<div>{{msg}}</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
msg: '这是我的第一个Vue项目'
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

说明:

  • <style scoped> :CSS 样式仅在当前组件有效,声明了样式的作用域,是当前的界面私有的!

9.第一个vue-cli项目的更多相关文章

  1. 手动实现一个vue cli

    目录 手动实现一个vue cli 1. 思考准备 2. 我们组织源码将会放在名为src的目录,webpack 打包需要一个入口文件,我们取作 main.js 3. 先预想以下会用到哪些基本依赖,第一个 ...

  2. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  3. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  4. 学习一个Vue模板项目

    最开始学习Vue的时候,不建议直接使用模板,而应该自己从头写起.模板都是人写的,要坚信"人能我能".只有自己亲自实践,才能促进自己主动思考,才能对模板.框架有深刻的理解. 在Git ...

  5. 【vue】创建一个vue前端项目,编译,发布

    npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...

  6. webpack 打包和手动创建一个vue的项目

    首先我们为啥要用webpack,为啥不用其他的打包的工具. 先听我捋捋, Webpack有人也称之为 模块打包机 ,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片. ...

  7. 安装Vue和创建一个Vue脚手架项目

    首先 安装node.js,安装成功可以在控制台输入[node --version ]查看node的版本,因为安装了node会自带npm所以我们可以用 [npm --version]查到npm版本  如 ...

  8. vue/cli项目添加外部js文件的一个方法

    有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...

  9. vue cli 项目的提交

    前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...

  10. Windows10安装node.js,vue.js以及创建第一个vue.js项目

    [工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...

随机推荐

  1. 剑指offer:按之字形打印二叉树(栈|双向队列+中序遍历)

    1. 题目描述 /** 请实现一个函数按照之字形打印二叉树, 即第一行按照从左到右的顺序打印, 第二层按照从右至左的顺序打印, 第三行按照从左到右的顺序打印, 其他行以此类推. */ 2. 双向队列 ...

  2. 剑指offer:序列化二叉(前序遍历+层次)

    1. 题目描述 /** 请实现两个函数,分别用来序列化和反序列化二叉树 二叉树的序列化是指:把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串,从而使得内存中建立起来的二叉树可以持久保存. 序列 ...

  3. (三十一)golang--面向对象之工厂模式

    golang面向对象中是不存在构造函数的,可以使用工厂模式.   使用工厂模式,让即使不是大写的变量可以被外部包使用.

  4. JAVA 运行springboot jar包设置classpath

    Java 命令行提供了如何扩展bootStrap 级别class的简单方法. -Xbootclasspath: 完全取代基本核心的Java class 搜索路径.不常用,否则要重新写所有Java 核心 ...

  5. 大话设计模式Python实现-模板方法模式

    模板方法模式(Template Method Pattern):定义一个操作中的算法骨架,将一些步骤延迟至子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 下面是一个模 ...

  6. LeetCode 61:旋转链表 Rotate List

    ​给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. Given a linked list, rotate the list to the right by k pla ...

  7. COMP222 - 2019

    COMP222 - 2019 - Second CA AssignmentIndividual courseworkTrain Deep Learning AgentsAssessment Infor ...

  8. RStudio 不中断下载依赖包

    修改下载方式:

  9. javascript的数据类型检测

    JavaScript有两种数据类型,分别是基本数据类型和引用数据类型.其中基本数据类型包括Undefined.Null.Boolean.Number.String和Symbol(ES6新增,表示独一无 ...

  10. IDEA 日常小技巧

    原文首发于 studyidea.cn点击查看更多技巧 适用于 IDEA 2019.2 之前版本 ,2019.2 版本以下功能默认开启. Surround a selection with a quot ...