Vue脚手架搭建和创建Vue项目

一、搭建Vue环境

1）验证nodejs是否安装好

在选中的文件中，输入cmd进入命令框进行验证
node -v

2）把npm换到国外中央仓库，换镜像：阿里淘宝

nodejs中含有npm，输入以下代码
npm config set registry https://registry.npm.taobao.org
验证是否更改镜像
npm config get registry

3）安装vue脚手架（地基）

接着在命令框输入
npm install vue-cli -g
install安装，vue-cli(vue-client缩写，vue客户端，vue.js)，-g全局安装
验证vue是否安装成功，注意大小写
vue -V/ vue --version

4）注意

如果命令出错Err，不是警告warn，重新执行命令（网络不稳定）
如果报权限不足，安装nodejs时要以管理员账号来安装
卡死用ctrl+c中断。

二、安装Vue项目

1）找一个目录输入

vue init webpack jt
会创建一个jt的项目，会有很多文件不仅vue.js

2）注意

执行后会有几个选择

如图一步一步来，第一个直接回车；第二个直接回车；第三个直接回车，内容是以前安装过git会自动寻找，第四个直接回车；第五个选Y；第六个选n；第七个选n；第八个选n；第九个选第一个使用npm回车。

安装成功

目录

3）安装成功后执行

cd jt
npm run dev
进入jt目录中

Your application is running here: http://localhost:8080
有这一行就成功了，意思是你有一个运行程序正在运行中，运行在http://localhost:8080，如果端口被占用，会自动修改端口。

显示的界面。

三、查看刚刚创建的Vue-jt项目

1）把jt项目导入HBuilderX

package.json 只看，不要动，全局配置
webpack.dev.conf.js 全局配置文件
index.html 首页，定义div id=“app”

src/main.js，创建Vue对象，Vue项目和Vue.js使用方式不同

new Vue({
  el: '#app',		挂载点
  router,			路由
  components: { App },		组件（省略后缀）App.vue
  template: '<App/>'		模板
})

src/App.vue
.vue文件有三个结构，只不过内容不同

<template>标签中的内容html+vue代码（动态）</template> 动态网站，视图部分
<script>通过vue，js来操作页面数据，代码写在，数据部分</script>
<style>组件的独立修饰，私有修饰，它不会影响其他组件！！！！</style>

默认集成子组件，自己写的所有组件都在App.vue中包含
创建默认脚手架，创建子组件HelloWorld，默认界面下的链接就是这个组件中定义

四、Vue的东西

1）提供很多指令，形成动态网站

v-model 双向绑定
v-show、v-if、v-else-if、v-else，判断语句
v-for，循环语句
v-on，@click，单击事件
v-bind/:href=“url”，url不是字符串，而是数据的变量名称
v-text、v-html，text纯文本，里面有html标签不解析，html会解析标签

2）结构：死的结构

View 视图，页面展示内容：a. 插值表达式{{msg}}、b. 标签上加指令 <p v-for=""></p>  
Model 模型，数据  
ViewModel 视图模型，把视图和数据绑定起来，Vue对象，内部完成解析过程  
衍生出：MVVM框架  
View， 规定页面body中加div，默认修饰app，习惯，Vue对其进行解析，动态网站  
Model，数据来源：el（element）挂载点、data数据、methods函数  

3）Vue渐进框架

1）简单的vue，直接引入vue.js
2）大型项目vue项目，
a. nodejs(web中间件，启动服务)/
b. npm 依赖js插件
c. webpack打包，编译过程（保存、重新启动）压缩
d. vue-cli 脚手架