目 录
3.2、进入该目录的cmd窗口 ( 检测一下 “vue -V” 是否可用!)
3.3.1.5、打开 项目(vuedemo) 相应的浏览器窗口
3.3.2、使用“命令行窗口”初始化项目(类似于3.3.1)
3.3.2.3、打开 项目(vuedemo2) 相应的浏览器窗口
1、Node.js-环境安装
打开Node.js 中文网 :https://nodejs.org/zh-cn/
找到 “ 下载 ” : https://nodejs.org/zh-cn/download/
选择 windows安装包 下载
下载完成之后,打开装个windows安装包,一路next 下去, 最后等安装完成!
检测安装是否成功: 打开电脑的cmd命令行窗口: 输入“node -v”,如果显示版本号说明安装node环境成功!
推荐 安装 “稳定版”。
1.1、Node.js-详细安装步骤
Node.js 安装---环境配置---输出"Hello World !"
https://blog.csdn.net/weixin_44949135/article/details/105330357
2、vue-cli脚手架安装
2.1、安装淘宝镜像
2.1.1、Windows系统
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.1.2、Mac系统
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
2.2、检测淘宝镜像是否安装成功
2.3、什么是脚手架?
在程序开发的时候,预先准备好的一个项目的基本目录结构。
2.4、如何 安装 vue脚手架?
打开命令行窗口,输入以下命令:( i 是 “ install ” 的 缩 写 。)
npm i vue-cli -g // windows sudo npm i vue-cli -g // mac ================安装了淘宝镜像就可以用下面的安装!安装速度-较快!================ cnpm i vue-cli -g // windows sudo cnpm i vue-cli -g // mac
2.5、检测 vue脚手架 安装,是否成功?
【输入“vue -V”指令,显示版本号,说明安装成功!】
vue -V
2.6、安装“淘宝镜像、vue脚手架”成功-截图展示
环境---只需要在电脑里 配置一次,之后就不用再配置了!
3、初始化Vue项目
前提须知(初始化项目的命令、步骤---详细解释)
- 第1步: 进入项目存放目录的cmd窗口
- 第2步: vue init webpack 项目名 // 项目名是英文
- 第3步: 按照上面的选择去操作
- 第4步: 执行 cd 项目目录
- 第5步: 执行 cnpm i
- 第6步: 执行 npm run dev
vue init webpack 项目名(英文的) // 如: vue init webpack vuedemo
⠹ downloading template // 下载模板
? Project name (vuedemo) // 项目名称 回车
? 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 - r
ender functions are required elsewhere
? Install vue-router? (Y/n) // 是否安装路由 输入 N 回车
? Use ESLint to lint your code? // 输入 N 回车
? Set up unit tests (Y/n) // 输入 N 回车
? Setup e2e tests with Nightwatch? No // 输入 N 回车
// 我们要安装项目依赖的模块包使用哪种方式,
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
Yes, use NPM // 使用npm 【没有安装cnpm, 就使用这个】 回车
Yes, use Yarn // 使用yarn
❯ No, I will handle that myself // 不选择,自己后面操作! 【 如果安装了cnpm 推荐 选择这个】 回车
# Project initialization finished! // 项目初始化结束
# ========================
To get started: // 【输入以下命令】
cd vuedemo // 进入项目目录
npm install (or if using yarn: yarn)
// 安装项目依赖的包! 如果安装了cnpm, 推荐这一步执行 cnpm i 【等待...】
npm run dev //启动项目 包安装好了之后
// 执行上述命令之后回显示如下内容
DONE Compiled successfully in 6398ms 10:59:32
I Your application is running here: http://localhost:8080
// 项目运行在本地的 http://localhost:8080
=======================
第1步: 进入项目存放目录的cmd窗口
第2步: vue init webpack 项目名 // 项目名是英文
第3步: 按照上面的选择去操作
第4步: 执行 cd 项目目录
第5步: 执行 cnpm i
第6步: 执行 npm run dev
3.1、找到一个存放项目的目录
3.2、进入该目录的cmd窗口 ( 检测一下 “vue -V” 是否可用!)
3.3、执行初始化项目的命令
3.3.1、使用VScode初始化项目
3.3.1.1、打开VScode终端
3.3.1.2、初始化Vue-Cli项目
3.3.1.3、“cnpm i” 安装 项目依赖的包
3.3.1.4、“npm run dev”---启动项目
3.3.1.5、打开 项目(vuedemo) 相应的浏览器窗口
3.3.1.6、VScode初始化项目---代码汇总
Microsoft Windows [版本 10.0.17763.1217]
(c) 2018 Microsoft Corporation。保留所有权利。
G:\day03>
vue -V
2.9.6
G:\day03>vue init webpack vuedemo
? Project name vuedemo
? Project description A Vue.js project
? Author lwx16 <l386335886@qq.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no
vue-cli · Generated "vuedemo".
# Project initialization finished!
# ========================
To get started:
cd vuedemo
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
G:\day03>cd vuedemo
G:\day03\vuedemo>cnpm i
/ [10/36] Installing postcss-discard-overridden@^4.0.1
WARN node unsupported "node@v13.12.0" is incompatible with babel-loader@7.1.5 › webpack@3.12.0 › watchpack@1.7.2 › watchpack-chokidar2@^2.0.0, expected
node@<8.10.0
\ [12/36] Installing picomatch@^2.2.1platform unsupported babel-loader@7.1.5 › webpack@3.12.0 › watchpack@1.7.2 › chokidar@3.4.0 › fsevents@~2.1.2 Package require os(darwin) not compatible with your platform(win32)
| [12/36] Installing lazy-cache@^1.0.3[fsevents@~2.1.2] optional install error: Package require os(darwin) not compatible with your platform(win32)
\ [12/36] Installing path-dirname@^1.0.0platform unsupported babel-loader@7.1.5 › webpack@3.12.0 › watchpack@1.7.2 › watchpack-chokidar2@2.0.0 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
| [12/36] Installing shebang-regex@^1.0.0[fsevents@^1.2.7] optional install
error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 36 packages
√ Linked 755 latest versions
[1/3] scripts.postinstall babel-loader@7.1.5 › webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "G:\\day03\\vuedemo\\node_modules\\_uglifyjs-webpack-plugin@0.4.6@uglifyjs-webpack-plugin"
[1/3] scripts.postinstall babel-loader@7.1.5 › webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 finished in 156ms
[2/3] scripts.postinstall babel-plugin-transform-runtime@6.23.0 › babel-runtime@6.26.0 › core-js@^2.4.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "G:\\day03\\vuedemo\\node_modules\\_core-js@2.6.11@core-js"Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a
good job -)
[2/3] scripts.postinstall babel-plugin-transform-runtime@6.23.0 › babel-runtime@6.26.0 › core-js@^2.4.0 finished in 225ms
[3/3] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 run "node ./postinstall.js", root: "G:\\day03\\vuedemo\\node_modules\\_ejs@2.7.4@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
[3/3] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 finished in 156ms
√ Run 3 scripts
deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate extract-text-webpack-plugin@^3.0.0 Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
deprecate css-loader@0.28.11 › cssnano@3.10.0 › autoprefixer@6.7.7 › browserslist@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate babel-loader@7.1.5 › webpack@3.12.0 › watchpack@1.7.2 › watchpack-chokidar2@2.0.0 › chokidar@^2.1.8 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
deprecate babel-plugin-transform-runtime@6.23.0 › babel-runtime@6.26.0 › core-js@^2.4.0 core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
deprecate webpack-bundle-analyzer@2.13.1 › bfj-node4@^5.2.0 Switch to the `bfj` package for fixes and new features!
Recently updated (since 2020-05-20): 10 packages (detail see file G:\day03\vuedemo\node_modules\.recently_updates.txt)
√ All packages installed (944 packages installed from npm registry, used 17s(network 16s), speed 1.
25MB/s, json 791(1.83MB), tarball 18.74MB)
G:\day03\vuedemo>cnpm run dev
> vuedemo@1.0.0 dev G:\day03\vuedemo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 30/33 modules 3 active ...&index=0!G:\day03\vuedemo\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 3332ms 上午11:17:03
I Your application is running here: http://localhost:8080
3.3.2、使用“命令行窗口”初始化项目(类似于3.3.1)
3.3.2.1、打开命令行窗口、初始化Vue-Cli项目
3.3.2.2、“npm run dev”---启动项目
3.3.2.3、打开 项目(vuedemo2) 相应的浏览器窗口
3.3.2.4、“命令行窗口”初始化项目---代码汇总
Microsoft Windows [版本 10.0.17763.1217]
(c) 2018 Microsoft Corporation。保留所有权利。
G:\day03>vue init webpack vuedemo2
? Project name vuedemo2
? Project description A Vue.js project
? Author lwx16 <l386335886@qq.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no
vue-cli · Generated "vuedemo2".
# Project initialization finished!
# ========================
To get started:
cd vuedemo2
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
G:\day03>cd vuedemo2
- [5/36] Installing tty-browserify@0.0.0
WARN node unsupported "node@v13.12.0" is incompatible with babel-loader@7.1.5 › webpack@3.12.0 › watchpack@1.7.2 › watchpack-chokidar2@^2.0.0, expected node@<8.10.0
| [7/36] Installing binary-extensions@^2.0.0platform unsupported babel-loader@7.1.5 › webpack@3.12.0 › watchpack@1.7.2 › chokidar@3.4.0 › fsevents@~2.1.2 Package require os(darwin) not compatible with your platform(win32)
[fsevents@~2.1.2] optional install error: Package require os(darwin) not compatible with your platform(win32)
- [7/36] Installing to-regex@^3.0.1platform unsupported babel-loader@7.1.5 › webpack@3.12.0 › watchpack@1.7.2 › watchpack-chokidar2@2.0.0 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 36 packages
√ Linked 755 latest versions
[1/3] scripts.postinstall babel-loader@7.1.5 › webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "G:\\day03\\vuedemo2\\node_modules\\_uglifyjs-webpack-plugin@0.4.6@uglifyjs-webpack-plugin"
[1/3] scripts.postinstall babel-loader@7.1.5 › webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 finished in 142ms
[2/3] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 run "node ./postinstall.js", root: "G:\\day03\\vuedemo2\\node_modules\\_ejs@2.7.4@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
[2/3] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 finished in 119ms
[3/3] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "G:\\day03\\vuedemo2\\node_modules\\_core-js@2.6.11@core-js"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
[3/3] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 finished in 135ms
√ Run 3 scripts
deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate extract-text-webpack-plugin@^3.0.0 Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
deprecate css-loader@0.28.11 › cssnano@3.10.0 › autoprefixer@6.7.7 › browserslist@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate babel-loader@7.1.5 › webpack@3.12.0 › watchpack@1.7.2 › watchpack-chokidar2@2.0.0 › chokidar@^2.1.8 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
deprecate webpack-bundle-analyzer@2.13.1 › bfj-node4@^5.2.0 Switch to the `bfj` package for fixes and new features!
deprecate babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
Recently updated (since 2020-05-20): 10 packages (detail see file G:\day03\vuedemo2\node_modules\.recently_updates.txt)
√ All packages installed (944 packages installed from npm registry, used 14s(network 13s), speed 139.41kB/s, json 791(1.83MB), tarball 0B)
G:\day03\vuedemo2>npm run dev
> vuedemo2@1.0.0 dev G:\day03\vuedemo2
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 30/32 modules 2 active ...index=0!G:\day03\vuedemo2\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 2672ms 上午11:34:57
I Your application is running here: http://localhost:8081
4、目录介绍
build 打包目录 【了解即可】
config 配置目录 【了解即可】
node_modules 项目依赖包 非常重要,如果没有这个文件夹 就去指向cnpm i 下载。 只有有这个文件夹才可以去运行项目(npm run dev) 【知道即可】
src 开发目录 【非常重要,开发都在这里做】
assets 目录 静态文件目录 【这里存放css、img 这些资源,但是会被编译】 【可以删除的重构的】
components 目录 【组件存放目录】 【可以删除的重构的】
App.vue 项目的根组件 【重要!!!】
main.js 项目的入口文件 【重要!!!】
static 静态目录 【存在静态文件,如图片、css、js 这里存的东西不会被编译】 【知道即可】
.babelrc babel配置文件 【无需知道】
.editorconfig 编译器语法配置 【无需知道】
.gitignore git版本提交的时候忽略的文件 【无需知道】
.postcssrc.js css转义的配置文件 【无需知道】
index.html 【单文件的 页面文件 重要】【知道就好了】
package.json 【重要, npm i执行的时候就会去读取这个文件下载依赖的包】. 【知道就好了】
README.md 【说明文件】 【无需知道】
5、文件介绍
5.1、main.js介绍
import Vue from 'vue' // 引入Vue 相当于 script src 引入文件
import App from './App'
Vue.config.productionTip = false
// 实例化一个Vue对象
new Vue({
el: '#app', // 找根目录下面的index.html里面的app节点
components: { App }, // 引入根组件 App 作为 页面的模板!
template: '<App/>'
})
5.2、App.vue 【组件】
三个部分组成---文件后缀是vue
template 是模板
script 是js
style 是样式
<template>
<div>你好</div>
</template>
<script>
// 组件的JS
export default {
data(){
return{}
},
methods:{
},
watch:{},
computed:{}
}
</script>
<style scoped>
</style>
多 谢 观 看 ~