搭建第一个VUE项目，入门级别
1.开发软件vscode
vscode特点：
- 开源，免费；
- 自定义配置
- 集成git
- 智能提示强大
- 支持各种文件格式（html/jade/css/less/sass/xml）
- 调试功能强大
- 各种方便的快捷键
- 强大的插件扩展
插件安装
Debugger for Chrome：从VS Code调试在Google Chrome中运行的JavaScript代码。
beautify：格式化代码工具，美化Javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。
Atuo Rename Tag：修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改。
中文（简体）语言包
Code Spell Checker：代码拼写检查器，一个与camelCase代码配合良好的基本拼写检查程序。此拼写检查程序的目标是帮助捕获常见的拼写错误，同时保持误报数量较低。
vscode-icons：显示Visual Studio代码的图标，目前该插件已被vscode内部支持："文件" -> "首选项" -> "文件图标主题"。
guides：显示代码对齐辅助线，很好用。
filesize：在状态栏中显示当前文件大小，点击后还可以看到详细创建
Path Intellisense：可自动填充文件名。
2.入门
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 控制了网页的行为
- Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
3.开始一个vue项目
1）安装node环境
Node.js简介
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。
Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言
类似于J2EE
Java的三个版本 : JAVASE(标准版),JAVAEE(企业版),JAVAME(微型版).
java是一个平台。他包括了，java语言，java开发环境(jdk)。java有三个版本，j2se(标准版),j2ee(企业版),j2me(微型版)不管哪个版本，都是java语言实现的一个框架。之所以要分版本，是因为3个版本是针对不同问题，设计的解决方案。j2EE是java的企业级开发版本，其实换句话说就是用来做web开发的java框架。javaEE通过设定统一的标准来解决web开发的问题，javaEE的接口，抽象类，规定了web开发所需要实现的流程。整个web的开发，有2层，第1层是服务器容器，比如tomcat，weblogic。他们在javaEE的规范下，实现套接字的连接，封装消息等等，第2层是业务，而这一层是你要做的，通过tomcat封装的消息，进行相应的业务处理。服务器容器的开发由大型的产商开发，而我们通常做的开发是在服务器容器上的业务开发，正是sun的javaEE统一了规范(比如用servlet)我们的业务代码，能和comcat进行很好的通讯。
下载地址为：https://nodejs.org/en/
npm简介
npm：Node.js的包管理工具（package manager）大家都把自己开发的模块打包后放到npm官网上，如果要使用，
直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。
更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X
npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。
类似与MAVEN
npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。
2）搭建vue项目环境
vue-cli简介
vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
安装vue-cli：vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，自动化前端项目工具
webpack是一个打包器（bundler），它能将多个js文件打包成一个文件（其实不止能打包js文件，也能打包其他类型的文件，比如css文件，json文件等）。
npm install --global vue-cli
2.5）centos下安装
sudo yum install -y nodejs
sudo yum install -y npm
npm install --global vue-cli //发生错误，无法成功安装
npm config set strict-ssl false//绕过https再sudo执行还是不行👋🏻 卡住了。。。
Yarn是facebook发布的一款取代npm的包管理工具。
sudo npm install -g yarn同样的错误：npm ERR! Error: CERT_UNTRUSTED
挥之不去的错误：npm安装过不了
转战MAC安装：
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) node -v
2.安装npm：略 npm -v
3.安装cnpm：sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
4.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架：sudo cnpm install -g vue-cli
3)创建一个基于webpack模板的新项目
进入项目目录，创建一个基于webpack模板的新项目
vue init webpack myfirstvue
选择项目名字、项目描述、作者等等Vue build ==> 打包方式，回车即可；
Install vue-router ==> 是否要安装 vue-router
Use ESLint to lint your code ==> 是否需要 js 语法检测
Set up unit tests ==> 是否安装 单元测试工具
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具
顺便还安装了yarn
4）进入项目，安装依赖
cd myfirstvue 进入项目
安装成功后，项目文件夹中会多出一个目录：node_modules
5）运行项目
npm run dev
运行效果：
6）项目目录解读
1、build：构建脚本目录
1）build.js ==> 生产环境构建脚本；``
2）check-versions.js ==> 检查npm，node.js版本；
3）utils.js ==> 构建相关工具方法；
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack开发环境配置；
7）webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
1）dev.env.js ==> 开发环境变量；
2）index.js ==> 项目配置文件；
3）prod.env.js ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息``
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
7）项目改造
1.在components目录下新建一个views目录，里面写我们的vue组件
在views目录下新建First.vue
2.在router目录下的index.js里面配置路由路径
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import first from '@components/views/first'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/first',
name: 'first',
component: first
}
]
})
3.template 写 html，script写 js，style写样式（运行会提示空格引号错误之类的，按要求修改即可）
template>
<div class="first-app">
{{msg}}
</div>
</template>
<script>
export default {
name: 'first',
data () {
return {
msg: 'welcome to firstapp'
}
}
}
</script>
<!-- what -->
<style>
</style>
4.效果：
浙公网安备 33010602011771号