《VUE+Django：手把手教你打造自己的电商独立站》专栏写作大纲
《VUE+Django：手把手教你打造自己的电商独立站》2.1 VUE开发环境部署
书接上回。前面已经完成了VUE开发环境的部署，接下来开始创建一个简单的项目。
首先我们通过脚手架创建一个基础项目，看看VUE项目的基本结构。
如果安装的是VUE3.x版本，运行命令（vue create xx项目名称）创建前端项目工程。如果是vue2.x版本，则运行（vue init webpack xx项目名称）。命令执行后显示如下界面，提供了三个选项。
1.Default([Vue 3] babel, eslint)：使用VUE3项目的默认配置
2.Default([Vue 2] babel, eslint)：使用VUE2项目的默认配置
3.Manually select features：手工选择配置选项
通常选择1或者2即可使用模板配置自动化生成项目框架。如果需要手工配置，选择选项3，会显示以下界面
一般正常项目开发只需要 Babel、Router、Vuex 即可开始，根据自己个人喜好可以加上 CSS Pre-processors、Linter / Formatter。
如果希望使用 TypeScript 来代替 JavaScript 进行开发，可以勾选下。回车后继续选择VUE版本
此处如果选择3.x版本，回车后选择router模式，选择Y，回车
选择CSS预处理方式，选择默认即可
选择ESLint配置，用于自动化代码格式化检测，选择Standard即可
选择语法检查的触发时刻，选择on save
选择配置文件的存放位置，推荐使用独立存放，避免干扰package.json中的其他全局配置
最后是否把这些配置保存为模板，供后续创建其他项目时使用。保存为模板，以后就可以直接使用了。
完成配置后，等待相关文件的下载，全部完成后按照提示进入项目的根目录，启动命令行窗口，执行npm run serve启动项目。注意此处必须先进入到项目所在的文件夹，然后再运行命令启动，否则会提示错误
项目会进行编译，编译完成后在浏览器中访问http://localhost:8080，当看到VUE的默认主页时就大功告成了，创建一个网站是不是很简单。
整个项目的文件结构如下
如果要使用ElementUI，在在命令行窗口执行npm i element-ui -S，安装elementui的包。如果要引入完整的element-ui，可以在main.js文件中写入以下语句，注意css样式文件需要单独引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
