关于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