前端开发 从基础到框架

vue-cli搭建项目脚手架配置

2018-12-20  本文已影响52人  不7而遇_

要用vue-cli来搭建一个项目 并且要进行一写配置。]
首先你的电脑必须要安装nodejs
首先我们先要安装vue-cli

这有两个版本可以选择

vue-cli3

$ npm install -g @vue/cli 

vue-cli2

$ npm install -g vue-cli

安装好后我们需要使用vue-cli 来创建一个 vue 项目

$ vue init <template-name> <project-name> //这里是安装的用法
$ vue init webpack project //这里我们用的压缩工具是webpack  项目名称是 project

安装是用问答的方式创建项目
如果确定敲回车就可以了

? Project name (text) //项目名称
? Project name text
? Project description (A Vue.js project) //创建一个vue项目
? Project description A Vue.js project
? Author (seven <xxxxx@163.com>) //项目作者
? Author seven <xxxxx@163.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) //是否安装 vue-router
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) //是否要用 ESLint 来检查代码规范
? Use ESLint to lint your code? Yes //可以使用 让代码更加规范
? Pick an ESLint preset (Use arrow keys)
? Pick an ESLint preset Standard
? Set up unit tests (Y/n) n //不使用
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys) //使用npm来创建项目 你也可以选择别的
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

这样我们就创建好了。 这是我电脑的显示 如果是mac 不会输出结果。


mac页面显示

创建好之后会有提示。cd project 进入项目。这是如果直接 npm run dev 或者 npm start 可以运行项目了
我们需用软件来打开你的项目。我用的是vscode

这时候我们需要做些配置。 我们需要sass 来编译。可以安装sass-loader 和 node-sass

npm i sass-loader node-sass -D

可以通过 config > index.js
更改

 autoOpenBrowser: true

可以在项目运行完成后自动在浏览器里打开。
(这里提到一点 如果项目要上线。我们需要更改host 改为

host:'0.0.0.0'

意味着我们可以通过ip 来访问

安装完成后可能 还会遇到要安装ui库 例如
mint-ui iview等 安装方法都可以在官方APi查看。

配置router 和vueX 我在之前都已经有记录了。

上一篇 下一篇

猜你喜欢

热点阅读