vue 项目官网推荐新手直接用脚手架ovue-cli来构建项目,这样可以避免新手去自己手动配置那些复杂的webpack,因为用vue-cli的话几乎可以实现零配置。
构建步骤大概如下:
1.执行:
npm install --global vue-cli
执行成功如下:
2.执行:其中'yourprojectname'为你的项目名称,可以自定义
vue init webpack [yourprojectname]
执行过程中有一些询问,如项目名称,描述,作者等这些可以直接回车默认,其他的询问是否需要安装vue-router,一般的项目几乎都要用到路由,所有选择yes,其他的eslint语法检查和单元测试的个人比较排斥,用户可以根据自己喜爱来选择yes、or.命令执行成功如下:
3.cd到yourpaojectname项目文件中执行 npm install,耐心等候安装
cd youprojectname npm install
执行成功效果如下:
4.用自己最习惯的ide编辑器打开刚刚创建的项目,个人比较推荐webstrom,打开后项目结构如下:
5.用webstrom知道的命令行工具执行:npm run dev
执行成功后,会提示你在浏览器打开这个链接:‘http://localhost:8080’,然后我们在浏览器中打开看看页面是这个样子的:
到这里我们就已经初步完成了有个vue项目的构建,但是要学习vue并且用vue来做项目的话,只会这些还远远不够,接下来我会继续更新,为大家简单的讲讲vue的知识,从vue生命周期---vue-router---vuex的用法,最后带着大家写一个小型的demo.