vue搭建，从环境到启动

首先，自己打算做一个前后端分离的项目，竟全然不会，全靠摸索，祈祷运气让我搭建顺利。。。

第一步，安装node环境

1.下载https://nodejs.org/en/

2.检查是否安装成功，查看版本号

3.利用包管理器，可以减少包的引用的麻烦，可以使用国内的淘宝cnpm镜像，会比国外的npm镜像速度快一点

用命令安装npm镜像        npm install -g cnpm -registry=https://registry.npm.taobao.org 

这是安装时的过程：

输入 cnpm -v     检查是否安装成功：

 

第二步，搭建vue项目

1.全局安装脚手架vue-cli     (vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板)

命令：npm install --global vue-cli

脚手架安装成功

 

 2.新建项目

命令：vue init webpack vue-chaoxcx   

 

 按照他给出的提示，输入Y 或N点击回车，就开始创建项目了

　　　说明：　Vue build ==> 打包方式，回车即可；

　　　　Install vue-router ==> 是否要安装 vue-router，Y 回车；

　　　　Use ESLint to lint your code ==> 是否需要 js 语法检测 n 回车；

　　　　Set up unit tests ==> 是否安装 单元测试工具  n 回车；

　　　　Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 n 回车；

 

 

有报错 也不知道有没有影响，继续吧

第三步，用visual studio code 打开项目

项目目录如下：

 用快捷键ctrl+~   打开窗口，执行命令npm i    加载依赖

 用命令 npm run dev  启动项目

 

 项目结构说明：

 

 

 第四步，开发

在components文件夹下新建文件夹views ,并创建组件Signin.vue

在index.js里面配置路由路径

ctrl+~ 显示终端控制台

ctrl+c  终止命令

在控制台里输入启动项目的命令： npm run dev 

 z在浏览器中输入网址就可以访问了

 

 

 

 第五步，关于父子组件之间的引用和传值问题

首先新建一个子组件

在父组件中引用子组件

 

做出的效果如下：

 

点击登录，弹出消息“登录成功”

 

更多资料请前往官网学习：https://router.vuejs.org/zh-cn/

 

参考网址：https://www.cnblogs.com/yanxulan/p/8978732.html