vue学习总结一(构建项目)

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.


猜你喜欢

转载自blog.csdn.net/buddha_itxiong/article/details/81059734