完全零基础搭建项目、安装新建Vue项目，上传Git

作者: 云想衣 | 来源:发表于2019-11-07 16:48 被阅读0次

按部就班的学习方法，非常适合零基础的朋友，一起开始Vue学习：
1. 通过下载引用的方法使用Vue
2.通过安装脚手架vue-cli新建项目
3.建立一个练习文件夹，做不同的案例
4.上传到git，哪里都可以练习
(说明：为方便易懂，以下指定文件夹名字，实际命名是随意命名)

一、先介绍如何在本地和 Github 建立项目，并同步

如果是本地练习，不需要上传 Github 在多个终端操作的，可以直接到第二块，开始Vue

准备工作：

步骤：

在 Git 上新建项目仓库 vueDemo

Git 新建步骤

2.新建完之后复制这个仓库在 Git 上面的的地址

复制仓库线上地址

3.通过 sourcetree 把项目/仓库克隆到本地
3.1打开 sourcetree
3.2新建：文件-新建 / Ctrl + n / tab 栏上的 + 都可新建

新建图示例

3.3 填写示例
需要注意：本地新建的文件夹需要时一个空文件夹，与Git上新建的同名即可

填写示例

得到的结果

此时拉取线上项目完成，在本地进行编辑可上传，实现多端和协同工作。初学实用于家和公司学习，不用带u盘。

4.上传
当在拉取的文件夹进行新建或者修改操作之后，上传工具 sourcetree 会提示有未暂存的文件点击暂存所有 / + 将文件提交为暂存文件
此时点击提交按钮，会把已暂存的文件提交到仓库，随后勾选master 点击推送。步骤：暂存 - 提交 - 推送 - 确认

暂存 - 提交

推送

确认推送

5.结果查看
推送成功的变成绿色对勾勾，完美。

推送成功

二、通过下载引用的方法，练习vue，可做多个练习，不用重复新建

1.在电脑新建一个名为 vueDemo (名字随意) 的文件夹，整个路径尽量不要有中文，避免不可知的错误

PS：如果是从 Git 上面克隆的项目/仓库，就直接在拉下来的文件夹 vueDemo (见上面第一板块)进行下一步，不用新建

2.在 vueDemo文件夹新建两个文件夹：

一个命名 vue-src (名字随意，用来以引用的方法练习vue)
另一个命名 vue-npm (名字随意，不要中文，不要包含大写，通过安装脚手架的方法练习vue)

如果是创建了Git仓库的，此时文件夹会变成问号，后面还会出现感叹号，这表示文件做了新增和修改，只需要正确提交就没有了。

Git 文件目录结构

3.下载并引入vue.js
官网介绍很清楚，这里做简洁明了的说明
引入可以在线引入，也可以下载到本地引入(同引入jQuery、css的道理) ,下载到本地可以避免网络错误，推荐。
vue 官网 →

官网截图

本地引用

4.建立好文件结构，并引入
下载好vue.js之后我们进行如下步骤的操作：

打开 vscode编辑器
将新建的 vue-src 文件夹拖入到编辑器中
新建html文件夹，--- 放以后做练习的例子
新建js文件夹，--- 存放 vue.js
新建css文件夹 --- 写样式文件，此处用scss

新建目录结构

5.demo 示例

demo示例

6.可以做一个空模板，每次新建的时候讲模板拷贝过去，详解如下：

6.1 每次新建例子的时候，在html文件夹下新建一个 demoxxx.html 文件
6.2 拷贝muban.html 的html 到新建的文件中
6.3 可以开始练习啦

拷贝模板

三.安装脚手架练习 vue

1.安装 node 和脚手架
在对 vue 有一定的熟悉之后，可以动过安装脚手架来练习Vue，因为在项目中都是用这种开发方式，同时可以安装各种 npm 的扩展和插件比如：axios、element-UI 等

安装脚手架的教程网上有很多，

需要注意的是可能会因为版本的不同每次的步骤稍有差别，如果是完全小白的，只要记住下面一点：

2.新建项目 (方法一)

2.1 打开VS code
2.2把新建的vue-npm文件夹拖入到VSCode中(如果是禁止状态，把VS Code 的属性 - 管理员运行取消即可)
2.3 按 Ctrl + ~ 快捷键打开终端开始新建

终端预览

说明：不用怕哪里出错，因为这只是通过 npm 来新建一个文件夹，不会在电脑安装多余内容，如果不是想要的结果，删除安装项目的文件夹，重新按顺序执行以下安装步骤即可

D:\aa\vueDemo\vue-npm> vue -V     // 查看版本号，说明安装成功
2.9.6

D:\aa\vueDemo\vue-npm> vue init webpack + '文件名'
// 文件名可要可不要，要表示新建一个 '文件名'文件夹
// 不要表示在当前文件夹新建

? Generate project in current directory? Yes   //不加'文件名'才出现，提示在当前文件夹新建项目
? Project name vue-npm   // 项目名称，可修改
? Project description A Vue.js project   // 项目描述，可修改
? Author kenqiuc   // 作者，可修改。此处我修改了
? Vue build standalone   // 这里选第一个，对初学没影响
? Install vue-router? Yes   // 是否安装路由 按 y 然后按回车 推荐安装
? Use ESLint to lint your code? No   // 按 n 回车；规范代码工具，初学不推荐，容易报错 
? Set up unit tests No   // 按 n 然后按回车；单元测试，不推荐
? Setup e2e tests with Nightwatch? No   // 按 n 然后按回车；也是一个测试，不推荐
? Should we run `npm install` for you after the project has been created? (recommended) npm   // 初学选 npm 

// 此时等待就好，等待安装完成