vue-cli脚手架搭建

2019独角兽企业重金招聘Python工程师标准>>>

一、环境安装

1.安装node,不确定是否安装，在终端运行node -v(版本需要在4.0以上)
2.安装npm,通过淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org  
3.检验是否安装成功，可以输入node -v回车，npm -v回车,如果有相应版本号，表明安装成功.
4.安装vue-cli，npm install -g vue-cli
(如果出现找不到vue命令或者报错没有权限,可以尝试一下sudo npm install -g  vue-cli)

二、vue-cli搭建步骤
1.新建文件夹
2.cd 文件夹
3.vue init webpack 项目名称   ----初始化一个项目
4.运行初始化命令的时候需要输入几个基本选项,如果不想填可以直接回车默认

5.打开文件夹,项目文件已生成,如图：

        build:操作文件,使用npm run dev时执行的就是这里的文件
        config:配置文件,执行文件需要的配置信息
        src:资源文件，所有组件以及所需的图片都放在这里
        assets:资源文件夹,存放图片之类的资源
        components:组件文件夹,组件都放在这个文件夹下
        router:路由文件夹,决定了页面之间的跳转
        main.js:webpack入口文件
6.在项目文件夹中打开终端运行npm run dev，以热加载形式运行，修改完代码后不需要手动刷新就可以看到效果
7.浏览器中打开localhost:8080(默认),即可看到相应的界面.默认端口是8080，如果想要修改端口号，在config下index.js文件中修改port.如图17行:

转载于:https://my.oschina.net/GracefulTing/blog/1620278