【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

 【vue】初探vue,创建vue项目_第1张图片

二、安装淘宝cnpm

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

打开终端,执行如下命令:

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

 查询cnpm信息:cnpm -v 

【vue】初探vue,创建vue项目_第2张图片

三、安装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】初探vue,创建vue项目_第3张图片

 终端窗口输入vue

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

 【vue】初探vue,创建vue项目_第4张图片

五、启动项目

方法1:

打开terminal,执行如下命令:

cnpm run serve

方法2:

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

cd 项目目录(cd my_vue)

cnpm run serve

组件的关系:

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

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

  • 父组件要使用子组件时候注意:

你可能感兴趣的:(Vue,vue)