vue学习笔记

497 阅读2分钟

关于vue的学习,vue目前很多大厂都在使用,其特点是简单功能也很强大,受到大家青睐,废话不多说我们进入学习阶段。

环境安装

大家都应该安装了node环境,这一块不知道怎么安装的坐飞机去安装吧。安装完nodejs环境后我们回来按装vue环境。

npm install vue -g

npm install vue-cli -g

npm install webpack -g

上面三个命令运行后,基本环境安装的工作就完成了。
验证安装成功,这是本次教程的版本说明,如果你安装的其他版本可能会出现一点点小问题。

npm view vue version // 2.6.11

npm view vue-cli version // 2.9.6

npm view webpack version // 4.42.1

创建工程

运行下面的代码,可以初始化并创建项目,如果你是小白请一路回车,如果你是大神,请随意操作,你开心就好。

vue init webpack vue-test

vue 创建时有这几种模板,可以根据具体的需求选择不同的模板,这里我们只讲webpack模板。

template-name:
    . webpack             // web模板
    . webpack-simple      // 一个简单webpack+vue-loader的模板,不包含其他功能。
    . browserify          //  一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
    . browserify-simple   // 一个简单Browserify+vueify的模板,不包含其他功能。
    . pwa                 // 基于webpack模板的vue-cli的PWA模板
    . simple              //  一个最简单的单页应用模板

运行工程

我们可以看到在vue-test目录里面出现了很多的文件。这里面的文件对于我们小白来说不需要全部都关注。大家可以看下在生成文件中的readme.md文件,里面已经写的很清楚了,运行这个项目的步骤。对了提醒下大家,你现在所在的目录应该还是在vue-test目录外面,你需要cd到vue-test目录中进行输入命令。

好了下面我将陪大家运行下我们创建的工程,首先运行“ npm install ”进行安装依赖,然后运行“ npm run dev ”进行启动项目(提示:安装依赖使用npm命令会慢一点,请求的数据在国外,我们可以使用cnpm来安装依赖命令是“ npm install -g cnpm --registry=https://registry.npm.taobao.org ”) 运行成功后是这样的

 DONE  Compiled successfully in 149ms
 I Your application is running here: http://localhost:8080

出现上面的文字说明我们已经启动了项目,然后在浏览器中输入

http://localhost:8080/

如果出现了,下面的文字说明已经安装成功了。

  • Welcome to Your Vue.js App