Vue 学习之路(1)

前言:1.前一阵子断断续续的学习,没有系统的整理思路,学下来记录一下。

           2.本人是phper js不好,学这个只是为了写个前后端分离的后台。只适合新手参考。只适合新手参考。只适合新手参考。

一、建议直接用脚手架,script引入有很多东西用起来不方便。

二、Ubuntu 安装vue-cli (我的是Ubuntu18.04)

       1.sudo apt install npm  (需要升级)     sudo npm install npm@latest -g   升级到最新版本  查看版本(npm -v   node -v)

       2.sudo npm install -g n  安装用于安装nodejs的 n 模块       sudo n lts  升级node到最新稳定支持版本

          (sudo n v8.11.3 )安装指定版本的nodejs

       3.sudo npm install --global vue-cli 安装Vue脚手架       查看版本  ( vue -V )

        ps:window系统 从官网下载安装文件  安装好了以后用window自带的 powerShell  往下进行

三、开始创建第一个Vue项目

        1.npm install-g cnpm --registry=https://registry.npm.taobao.org 安装淘宝镜像

        2.sudo mkdir /srv/vue     新建一个vue项目文件夹(也可以是其他位置)

        3.cd /srv/vue   

           vue init webpack my-project   一路根据提示回车 或者 Y就可以

        4.cd my-project     进入创建的项目目录 

           sudo cnpm Install

           sudo  cnpm run dev 

        5.然后会看到 http://localhost:8080    浏览器打开 这个链接 就可以看到第一个项目的样子。

                               

四、接下来要开始看代码了

       1. cd /srv/             

           sudo chmod -R 755 vue/       给项目写入的权限

        2.用编辑器打开项目 my-project 我们新手们 一般只操作 src文件夹下的文件。。(我用的webstorm)

        3.我们可以发现 显示都是.vue文件 而且可以重复利用固定的模板

         <template></template><script></script><style></style>

        4.可复用性

           import Hellofrom "./components/Hello"
           export default {
                     name: "App",
                     components: {
                     Hello,
                    },
             }

         5.这些都比较简单 可以跟着 菜鸟教程 走一遍就可以

五、未完待续...

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章