vue学习---基于vue2项目搭建详述

vue2项目创建

一、环境搭建

此篇是基于 vue2.x 的开发环境

1.直接用<script>引入

直接下载vue.js文件，并用<script>标签引入

<script src=”c:/vue/2.6.14/vue.min.js” />

2.cdn

<script src=”https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js” />

3.npm

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

npm i vue

4.命令行工具(cli)

Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

第一步：全局安装vue-cli :$ npm i -g @vue/cli

第二步：创建一个基于webpack模板的新项目:$ vue create my-project

第三步：进入项目目录，启动服务: $ cd my-project ; ``$ npm run serve

以上四种vue的引入方式只需采用其一即可。

注意：

第一种直接引入的方式有缺陷，不能直接发布，没有压缩，效率低，插件不齐全

而第四种就可以很好的解决上述问题，命令行工具可以利用插件快速构建一个项目，以及打包压缩合并便于项目发布

二、命令行工具具体实施步骤

1. 先全局的安装vue-cil:

   

   可以通过vue --version检测有没有安装成功

   

2. 创建项目，先进入准备创建项目的文件夹根目录中，在此文件夹中打开cmd窗口，再输入创建命令vue create 项目名称

   

   回车

   

   回车，选择你想要的

   

   

   回车

   

   回车

   

   回车

   

   回车

   

   

   回车创建完成

   

   

   

三、项目的运行

第一种：在创建项目的文件夹中

打开cmd窗口，执行cd 项目名称进入项目所在的文件夹中

执行npm run serve 命令

将local后面的地址粘贴在浏览器中运行

第二种：在创建的项目文件夹中

在项目文件夹中地址栏上直接打开cmd，执行npm run serve 命令

第三种：在VSCO中运行

将新建的项目用VSCO打开，打开后再VSCO界面用`ctrl+``

打开终端

在终端的窗口中执行npm run serve 命令

完成

当上面运行过程中出现错误解决方式

打开cmd，运行就可解决

四、关于项目文件

五、关于vue文件

一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue

一个.vue文件内部一般是由三部分组成: template , script , style

template 内部写标签 , 只能有一个根元素

script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里

style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LFKRZI6I-1667106450512)(F:\笔记\self\第三阶段\vue2环境搭建\51.png)]

template 内部写标签 , 只能有一个根元素

script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里

style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响