如何搭建一个vue项目

vue现在是前端开发中最火的一个框架,今天我们就一起来说说如何搭建一个vue框架

1、全局安装 vue-cli

 npm install --global vue-cli

注意:如果npm安装起来太慢,也可以使用国内阿里云的镜像cnpm进行安装,但使用cnpm之前必先安装cnpm的镜像,具体cnpm的安装方式可参考楼主博客首页相关文章。cnpm的使用方法和npm基本一致,只需要将npm换成cnpm即可

2、创建一个基于 webpack 模板的新项目

vue init webpack my-project      #my-project  是项目名称

一直回车即可

具体中间解释如下

输入上面命令后,会询问几个选项,根据自己需要填写就可以了。

Project name :项目名称,如果不需要就直接回车。注:此处项目名不能使用大写。
Project description:项目描述,直接回车
Author :作者
vue build 构建方式(暂且这么解释)
两个选择(上下箭头选择,回车即为选定)
1.Runtime + Compiler:recommended for most users
(译:运行+编译:被推荐给大多数用户)
2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY 
allowed in .vue files-render functions are required elsewhere
(译:只运行大约6KB比较轻量的压缩文件,但只允许模板(或任何VUE特定HTML)。VUE文件需要在其他地方呈现函数。翻译不精准,意思大概是选择该构建方式对文件大小有要求)
这里推荐使用1选项,适合大多数用户的
install vue-router?是否安装vue的路由插件,需要就选y,否则就n(以下均遵循此方法)
Use ESLint to lint your code?是否使用ESLint检测你的代码?
(ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。)
Pick an ESLint preset:选择分支风格
选项有三个
1.standard(https://github.com/feross/standard) js的标准风格
2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法,这个github地址说是JavaScript最合理的方法
3.none (configure it yourself) 自己配置
Setup unit tests? 是否安装单元测试(暂不详细介绍)
Pick a test runner 选择一个单元测试运行器
选项有三个
1.Jest(Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架)
2.Karma and Mocha
3.none
Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景”。)
Should we run 'npm install' for you after the project has been created?(译:项目创建后是否要为你运行“npm install”?这里选择包管理工具)
选项有三个
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)
一路回车到此等待安装完毕,会提示接下来的命令行

如何搭建一个vue项目_第1张图片

3、切换到你创建的文件夹下 

cd vue-iview    切换到你创建的文件夹下 

4、 安装依赖

npm install       安装依赖

5、启动项目

npm run dev     开始你的项目

6、打包

但是这个只能在本地跑,要如何在我们自己的服务器上访问呢? 此时需要执行: ·

npm run build    编译打包你的项目

会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。

以下地址是个人搭建的一个纯净的vue结合iviewd的框架,里面什么都没写,仅供学习参考,如需项目,请自行到个人github首页查找vue项目

 

你可能感兴趣的:(vue,vue,npm)