Vue学习篇(一):搭建环境+创建项目

从git上导入项目后,已经开始写vue的界面了,今天用webstrom新建工程才发现还需要配置vue-cli or @vue-cli。

这篇主要讲下webstrom相关配置。

1:配置webpack

     打开命令行,输入npm install webpack -g ,全局安装webpack。

     成功后检测下,继续输入 webpack -v

    第一次输入会出现Do you want to install 'webpack-cli' (yes/no):

    输入y即可。

   Vue学习篇(一):搭建环境+创建项目

2:安装vue-cli    

     输入命令行:npm install --global vue-cli

Vue学习篇(一):搭建环境+创建项目

   检验是否成功:vue -V.

  注意这里v是大写,不能是小写。

  Vue学习篇(一):搭建环境+创建项目

根据上述路径查看文件目录:

Vue学习篇(一):搭建环境+创建项目

这里不需要再配置什么,vue-cli是全局的,webstrom会自动识别路径。

 三:创建项目

    新建工程,选择vue.js.

     file->new->project>vue.js

    Vue学习篇(一):搭建环境+创建项目

   可以看到vue-cli这一行已经自动识别的路径,并填充。

  改下工程名字,next,注意这里项目名称不能包含大写字母。

  接着下一步:

Vue学习篇(一):搭建环境+创建项目

 接着填写author等信息完成创建。

工程目录如下:

 Vue学习篇(一):搭建环境+创建项目

运行项目:

Vue学习篇(一):搭建环境+创建项目

 

Vue学习篇(一):搭建环境+创建项目

打开chrome,访问:

Vue学习篇(一):搭建环境+创建项目