vue知识掌握(一)

vue项目的搭建

本文章主要讲述vue项目的搭建,在搭建vue项目前需要准备一些材料。

1.node安装

npm:在你安装node的时候一般node已经自带了npm,所以忽略。

webpack:npm install webpack -g

检验安装是否成功的办法:

检验node:node -v

检验npm:npm -v

检验webpack:webpack -v

2.安装vue-cli(vue脚手架)

npm install --global vue-cli

接下来就是正式的开始搭建项目了。

3.打开Windows的命令行窗口

快捷方式:win+R然后输入cmd确认。

将路径切换到自己希望保存项目的路径。

然后输入:vue init

init是初始化项目,template-name是模版名,project-name是项目名(自定义)。

例如(vue init webpack thefive)

目前vue官方提供了六种初始化模版,分别是webpack、webpack-simple、browserify、browserify-simple、pwa、simple。其中最常用的是webpack模版。

这时候命令行会出现一系列提问需要你去确认。

? Project name (thefive)

确认项目名

? Project description (A Vue.js project)

确认项目描述

? Author (.................)

确认作者信息

? Vue build (Use arrow keys)

Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

选择打包方式

? Install vue-router? (Y/n)

是否安装vue-router

? Use ESLint to lint your code? No

是否使用ESLint语法

? Set up unit tests (Y/n)

是否添加单元测试

? Setup e2e tests with Nightwatch? (Y/n)

? Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)

Yes, use NPM
Yes, use Yarn
No, I will handle that myself

选择启动方式

  1. 初始化之后,再次将路径改到你的thefive里面

cd thefive

然后

npm run dev

运行之后会得到一个本地地址:

http://localhost:8082

将地址复制到浏览器就可以看到效果了。

原文地址:https://www.cnblogs.com/akun-2017/p/9574418.html