vue脚手架安装教程

MVVM架构

M ; Model 模型层;业务逻辑层; 主要包含 JS 代码;用于管理业务逻辑的实现。

V ; View 视图层 主要包含 HTML/CSS 代码;用于管理 UI 的展示。

VM ; ViewModel ;视图模型层;是vue实例对象;用于将 data 与视图层的 DOM 进行动态绑定。(图来源尚硅谷)

 基于脚手架环境开发 vue 项目

制作web项目;从小作坊状态转向工程化开发的状态就需要了解 Vue 脚手架环境。脚手架开发环境将会提供一套 开发标准便于工程化快速开发。 基于脚手架环境就可以生成标准化开发时所需要的项目包。

环境要求;

1.node版本;12~16

       检查node版本的命令; node   -v

(我是按window ; R启动的)

安装 nodejs ; https://nodejs.cn/download

 2.npm;包管理工具;需要配置镜像地址;改为中国仓库镜像地址。

执行命令前查看当前镜像;npm get registry

设置镜像地址的命令:

基于npm命令;全局安装脚手架工具;这样就可以通过该工具创建vue项目了。

安装成功如图;

只要没有红色;ERROR都算成功;

安装成功之后;将所有的cmd窗口都关闭;;重置系统环境变量;;通过vue命令来查看vuecli的安装版本;

;如果出现2.几的版本;通过vue命令删除后;在去安装;

至此就可以通过vue命令生成项目包了。

安装时常见错误;

network相关错误属于网络错误

 生成项目包

安装脚手架后;通过vue创建完成完整的项目包;该项目包将会自动创建项目所需要的基本资源及基础目录结构。

注意;

 也就是说;在你的根目录中不要出现任何文件;比如vue.js文件

找一个干净地方执行命令;

 在你的干净的文件夹下执行命令哦;

 输入vue create vue-pro;这个是自定义项目文件名称;;然后按一次空格;如果多次按空格;按Ctrl;c;结束命令

 按了空格;耐心等待;然后出现如图;按向下箭头;选择自定义项目;敲空格

 上下光标用于移动;空格用来选中或反选;选择左侧4项;按回车即可。

 选择2.x  Vue2的版本;按空格即可

 后续按空格即可。

 终于成功了;

当前脚手架项目已经创建完毕。该脚手架项目内部自带一个web服务器;需要执行一条命令; npm run serve 即 可启动服务器。根据上述提示的命令;进入项目目录中;执行该命令即可启动项目;

 这一条命令;将会加载当前目录下的package.json;根据相关配置;启动web服务器;启动成功后;将会占用8080端口;打开浏览器;访问地址;

 即可看到脚手架为我们创建的首页。

脚手架项目包的使用

项目包中已经设计好相关的目录结构;推荐使用单独的vscode窗口来打开该项目;;直接打开项目目录;不要打开父目录

 注意事项;要使用vscode直接打开项目根目录;这样才可以使用vscode提供的一系列功能进行开发。

插件;

 脚手架项目的基础目录结构

 打开src;

 脚手架的运行过程;

当脚手架启动时;将会打开public/index.html;并且在该网页中运行main.js;将会创建Vue对象;通过Vue对象来管理 index.html中的#app内容的显示。初始化状态下;默认将App.vue组件中的内容渲染到#app中;从而看到页面效果。

所以要研究.vue文件的写法即可搞定各种在脚手架中开发vue项目的细节。

<template>
  <div>
    <h3>电影名称</h3>
    <div>电影时长;117分钟</div>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang=;scss; scoped>

</style>

<style lang=;scss; scoped></style>

<p v-for=;n in 10;>文本....文本{{n}} {{n}} {{n}}</p>

<p v-for=;n in 10;>文本....文本{{n}} {{n}} {{n}}</p>

for(n=1; n<=10; n;;){
    随意的使用n变量
    dom.append(;<p>文本....文本....${n}</p>;)
}

<p class=;item; v-for=;(m, i) in movies; :key=;i;>{{m}}</p>

for(i=0; i<movies.length; i;;){
    let m = movies[i]
    dom.append(;<p>${m}</p>;)
}