6.构建项目Ⅰ

此处构建的项目未使用官方提供的vue-cli脚手架

1. 首先在自己看得上的地方新建一个文件夹 D:\Workspace\Learn\Vue\vue-easy

2. 进入项目根目录初始化项目

npm init

这会提示你关于项目的更多细节，并创建一个 package.json 文件.如果你想直接跳过这些提示信息信息，可以使用 -y 标记表示你能接受

npm init -y

或者你可以设置一些语义化的默认值，如：

npm config set init.author.name

npm config set init.author.email

image.png

3. 在项目中安装Vue

npm install --save vue

4. 创建index.html文件， /src目录/dist目录

到目前为止项目的目录结构为：

image.png

5. 在src路径下创建js入口文件main.js，项目根组件App.js，和组件目录components，并且创建两个组件Test1.js和Test2.js 。

main.js 是所有js的入口，它声明与其他组件的依赖关系（而其他组件又会声明和别的组件的关系），我们在写完项目的时候需要使用webpack打包整个项目的js代码，而这个main.js就是打包寻找依赖的入口。

App.js是根组件。

components文件夹下存放的是项目中的除根组件外的其他组件

6. 编写组件test1

注意：编辑的时候可能遇到这样的报错

image.png

解决：在setting中找到javascript language verdion，选择ES6

image.png

① 编写Test1.js

image.png

② 在根组件中引用test1

image.png

③ 通过main.js将根组件挂载到入口文件index.html

将根组件注册为Vue实例的组件，并且在模板中使用它（template:''），然后将这个Vue实例挂载到index.html中id为app的元素中。

image.png image.png

④ 打包

webpack ./src/main.js ./dist/main.bundle.js

将打包生成的main.bundle.js文件引入到index.html中

image.png