01vue-搭建vue项目步骤

截图有新有旧，就不整理了；步骤都差不多，主要是版本不一样。

资源：

1.Vue.js2.0从入门到放弃---入门实例（一）

2.Vue.js入门学习（一）

3.Vue官方中文Api文档

4.如何搭建一个vue项目(完整步骤)

5. vue.js开发环境搭建

一、前期准备（node,npm）

#下载node.js：https://nodejs.org/en/
//安装node
//查看node版本
$ node -v

//安装npm
# 最新稳定版
$ npm install vue 

//如果有些资源被屏蔽，可以安装国内镜像cnpm
$ npm install -g cnpm --registry=http://registry.npm.taobao.org 
//检查是否安装成功cnpm
$ cnpm -v

版本检查.png

二、搭建vue项目环境

2.1 直接引入vue.js到项目中

//来源：https://v2.cn.vuejs.org
#引用js


//在新建的文件夹中安装vue
$ npm install vue

#页面完整案例



    
    


    
{{message}}
    
鼠标移动上去，出现文字

    

2.2 使用vue-cli 搭建项目

//vue

#全局安装vue-cli
$ npm install --global vue-cli 
or
$ npm install --g vue-cli

//创建一个基于 webpack 模板的新项目: vue init webpack 项目名
#创建vue项目
$ vue init webpack vue_mobile

//说明：一般都是回车确定就好。
# 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 回车；

//创建后，进入项目，运行
#cd 项目名称
$ cd vue_mobile 
$ npm run dev

npm install01

npm install02

webpack01

webpack02

运行

现有文件中安装vue

现有文件中安装vue-结果

三、项目目录

项目目录

初始项目目录-新

运行后项目页面

四、安装依赖包资源

//npm
$ npm install  

//cnpm，已经安装cnpm镜像
$ cnpm install

//假如安装依赖的时候报错，可以根据提示信息，重新安装依赖文件以及版本
//例如ajv@^6.0.0 依赖
$ npm install ajv@^6.0.0

依赖报错

手动安装依赖

依赖资源包展示

五、利用vue list 查看可用模板

image.png