Vue-cli构建spa应用

2024-08-30 04:14:58

2.1 VUE-cli构建spa应用

npm install -g vue-cli
Vue init webpack-simple demo
vue init webpack demo2

如果在项目目录里可以用npm i vue -g -S来安装，然后如果用script标签引用的话就是script src ="node_modules/vue/dist/vue.js"来引用vue

Vue-cli 脚手架安装

cnpm i -g vue-cli

安装完了可以在项目目录里执行shell脚本

vue init webpack-simple demo

按照要求输入适当的回答然后就会在目录里创建一个demo文件夹，里面就可以有项目了。

要运行项目就要用shell脚本进入项目目录里，运行npm run dev。但是运行不起来是要报错的。原因是因为没有安装相应的依赖。

所以需要执行cnpm i，等装完了就行了,运行npm run dev就可以跑起来了。

3.vue配置介绍

按照上面的套路新建一个ImoocMall的项目

> vue init webpack imoocmall
//一堆配置，eslint NO
//E2E NO
>cnpm i

然后就新建好了一个项目

- 这个是打包好的配置的文件夹

- config是上面的webpack的配置

- src是开发项目的源码

- App.vue是一个入口组件，main.js是项目入口。另外vue结尾的都是一个vue组件
- static放的是静态资源

- 这个是ES6解析的一个配置。
- 编译器的一个配置
- 忽略git上传文件的配置
- html添加前缀的一个配置
- 单页面的入口
- 项目的基本配置，npm i 是照着这个装的
- 这两个可以合成一个，但是SPA想做一个清晰地架构，所以把他们拆开了。这两个是配置的核心部分
- Build.js是用来构建生产用的包，就是整个bundle.js和一个index.html
- chalk是一个shell语法高亮的插件
- Semver是一个版本检查工具，如果有依赖需要Node版本比较高，现在版本不够时候他会提醒
一般该文件的时候都是直接改index.js的配置。再就是改webpack.base的文件
- 对于这种直接引用到目录的require，一般都是指目录底下的index.js文件。如果没有index.js会报错的。
- 用在成产的配置，有各种插件，其中有个HTMLWEBPACKPLUGIN插件是将打包的东西自动放到index.html失中的插件

最新文章

热门文章