由于工作太忙了,一直都是东奔西跑的,好多知识都是零散的,最近刚好有空,就计划利用这个空闲时间认真的整理以前学过的知识,帮助自己回顾过往,中间也难免有很多错误,欢迎指正挑刺。一直以来都是万金油,最后就是啥都会,但是也都是啥都会一点也都不精,逼着自己写成文章也是保障梳理自己知识系统的目的。
-
搭建vue项目环境
-
-
1、全局安装vue-cli
安装vue2.X
npm install vue-cli -g
安装vue3.X
npm install -g @vue/cli
-
2、检查是否安装成功
-
在命令行输入:
-
vue --version
-
如果输出版本号说明安装成功
-
3、创建一个基于 webpack 模板的新项目
-
进入你的项目目录
cd vuesource
vue init webpack 项目名
-
中间会有一些输入提示符的地方,如:
-
? Generate project in current directory? Yes
? Project name test1
? Project description test
? Author test
? Vue build (Use arrow keys)
-
还有好几个地方,根据提示内容输入就可以也会安装yarn,同意就行,最后会输出如下:
-
> test1@1.0.0 lint
> eslint --ext .js,.vue src test/unit test/e2e/specs --fix
sh: eslint: command not found
Project initialization finished!
========================
To get started:
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
-
到这个时候还不能着急,还继续后面的依赖项要安装
-
4、安装依赖
-
npm i这个命令即可
-
此时项目文件列表如下:
-
README.md music-website-master static
build node_modules test
cesium-main package-lock.json vueworkplace
config package.json
index.html src
-
多了node_modules这个文件夹。
-
5、启动项目
$ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev
-
即可以,出现:
-
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
(node:10611) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
12% building modules 24/28 modules 4 active ...se/Desktop/source/vuetest/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting n
DONE Compiled successfully in 2664ms
-
即表明成功
-