开发环境
- 全局安装node.js ，也可以使用nvm（node version manager）node版本管理器安装不同版本
- 全局安装vue vue-cli
npm install vue vue-cli -g
cnpm install vue vue-cli -g
- 创建项目
vue init webpack my-project
创建步骤
- project name？ 项目名称
- project description？ 项目描述
- author？ 作者
- vue build？打包方式回车即可
- install vue-router？是否安装vue-router，需要y
- use up unit tests？是否安装，单元测试工具，现在不会n
- setup e2e tests with nightwatch？是否安装，单元测试工具目前不会n
- 最后一部选择运行命令即可
进入项目文件夹
cd my-project
安装依赖
cnpm install
在本地端口运行
npm run dev
项目创建成功
image.png
复制地址到浏览器运行
image.png
生成的文件夹如下
image.png
-
build/ 编译用到的脚本
- build文件夹中保留了各种打包脚本，不可或缺，不可随意修改
- build.js: 打包使用，不能修改
- check-version.js：检查npm的版本，不能修改
- utils.js：不能修改，做一些css/sass等文件的生成
- vue-loader.conf.js: 重要配置文件，不能修改，用于辅助加载vue.js用到的css source map等
- webpack.base.conf.js / webpack.dev.conf.js / webpack.prod.conf.js: 这三个文件都是基本的配置文件，不能修改
-
config/ 各种配置
- 与部署和配置相关
- dev.env.js：开发模式下的配置文件，一般不用修改
- prod.env.js：生产模式下的配置文件，一般不用修改
- index.js：重要文件，定义了开发时的端口、图片文件夹（默认static），开发模式下的代理服务器
-
dist/ 打包后的文件夹 该文件夹需要运行npm run build 打包命令才会生成
-
文件夹结构如下
image.png - !文件名中无意义的字符串是随机生成的，目的是让文件名发生变化，方便部署，同时方便Nginx服务器重新对文件进行缓存
- app.css：编译后的css文件
- app.js：最核心的js文件，几乎所有的代码逻辑都会打包到这里
- manifest.js：生成的周边js文件
- vendor.js：生成的vendor.js文件
- 每个.map文件都很重要，简单理解有了.map文件，浏览器就可以先下载整个.js文件，然后再后续的操作中部分加载对应的文件
这个文件不能放到git中，因为每次编译之后，这里的文件都会发生变化
-
-
node_modulse/ node第三方包
- node项目用到的第三方包特别多，也特别大，这些文件是由npm install 命令产生；所有再package.json中定义的第三方包都会被自动下载，保存在该文件夹下。
- node_modules中往往会有几百个文件夹
- 注意，这个文件夹不能放到git中
-
src/ 源代码
-
src文件夹是核心源码的所在目录，结构如下
image.png
- assets文件夹用到的图片都可以放在这里
- components用到的"视图"和"组件"所在的文件夹（核心）
- router/index.js是路由文件，定义各个页面对应的url
- 如果index.html是一级页面模板的话，App.vue就是二级页面，所有的其他Vue.js页面都作为该模板的一部分被渲染出来。
- main.js没有实际的业务逻辑，但为了支撑整个Vue.js框架，有必要存在
-
static/ 静态文件，存放的文件不会经过webpack处理，可以直接引用
index.html 最外层文件
package.json node项目配置文件
