【vue】初探vue，创建vue项目

前言：

如果要开发一个平台，不仅需要掌握后端技术，还需要通过前端页面进行展示，即达到美观效果，又方便我们进行操作达到很好的交互效果。

这里我接触到了vue前端框架，市面上有很多比较好用的基于vue的前端组件库，比如面向app的饿了么Mint UI，面向腾讯微信内网页和微信小程序的We UI，服务于pc界面的iView UI，面向所有层次的layUI，还有现在即将要学习的饿了么推出的Element UI，主要用于浏览器界面展示的框架；

一、安装node.js

安装《软件安装包》目录下的 node-v12.18.2-x64.msi

下载地址：https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi

终端窗口查询是否安转对应node或者npm:

node -v

npm -v

 

二、安装淘宝cnpm

NPM镜像_NPM下载地址_NPM安装教程-阿里巴巴开源镜像站

打开终端，执行如下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

 查询cnpm信息：cnpm -v 

三、安装vue-cli脚手架

#使用npm
npm install -g @vue/cli
#或者使用淘宝npm镜像源（建议使用cnpm）
cnpm install -g @vue/cli

如果安装过程中报如下错：

To install it, you can run: npm install --save vue-runtime-helpers

执行如下命令：

npm install --save vue-runtime-helpers

四、使用vs code或者webstorm创建工程项目

建议安装git进行源码管理

#创建项目
vue create 项目名
或者在webstorm里新建一个vue.js的项目

#如果使用gitbash
winpty vue.cmd create 项目名

#或者创建默认工程目录
vue create 项目名 --default

#用命令vue init webpack+项目名称
#来生成和初始化项目，推荐初始化项目名称到加入路由那处选择默认，之后全选no，之后npm初始化那里选推荐默认选项npm就好;
如下图所示：

 

 终端窗口输入vue

 使用编辑器打开创建的项目目录

 

五、启动项目

方法1：

打开terminal，执行如下命令：

cnpm run serve

方法2：

进入到指定的项目目录里运行项目

cd 项目目录（cd my_vue）

cnpm run serve

组件的关系：

components目录--存放子组件文件

App.vue----父组件文件

• 父组件要使用子组件时候注意：
  • 在<script>里导入子组件模块
  • 在export default里的components里声明子组件
  • 在templates里引用该

目录解析

目录/文件	说明
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式