Vue开发环境搭建

Posted 2020-12-16 jianghengchao

Node.js 安装

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)
 
2.基于node.js,利用淘宝npm镜像安装相关依赖
 
 在cmd里直接输入：cnpm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等待安装...
 
3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架
 
在cmd里 1)输入：cnpm install -g vue-cli，回车，等待安装...
 
            2).输入：vue，回车，若出现vue信息说明表示成功
    {{Commands:

    init        generate a new project from a template (从模板生成新项目)
    list        list available official templates (列表可用官方模板)
    build       prototype a new project (建立一个新项目的原型)
    help [cmd]  display help for [cmd]   (帮助，显示帮助)

  Options:

    -h, --help     output usage information  (帮助输出版本号)
    -V, --version  output the version number  (版本输出版本号)}}

 
4.创建项目
在cmd里输入：vue init webpack vue_test(项目文件夹名)，回车，等待一小会儿，依次出现‘git’下的项，可按下图操作

5.安装依赖
 
在cmd里  1).输入：cd vue_test（项目名），回车，进入到具体项目文件夹
 
             2).输入：cnpm install，回车，等待一小会儿
c

6,然后在看下建的项目，五个文件夹都是否有了，新建的项目总共12个对象


7，cmd基本命令
发布项目预览：webpack(命令：内网：cnpm install webpack -g，外网：npm install webpack -g)
启动项目：cnpm run dev
停止运行并推出：ctrl+c

 

开发工具安装（个人喜好Hbuilder）

sublime开发工具

打开https://packagecontrol.io/installation#st3，选sublime text3,复制里面代码
打开sublime，点左下角，按Ctrl+`，贴入代码
preferences-package control-install，选第一个，安装完成
preferences-package control-install，输入vue，选Grammar highlighting，安装完成

Hbuilder开发工具

 下载地址：http://www.downza.cn/soft/196563.html

下载后安装一直下一步就好了，网上搜索添加代码提示