# Uni-app工程转vue-cli工程步骤 ### 一、全局安装vue-cli ~~~js // 安装之前需要安装node,npm,安装方法自行百度 npm install -g @vue/cli ~~~ ### 二、创建一个空的uni-app工程 ~~~js //使用正式版（对应HBuilderX最新正式版），my-project项目名称不支持驼峰式命名 vue create -p dcloudio/uni-preset-vue my-project //执行命令会先安装uni-app的插件，插件安装完成后，会提示选择项目模板,可选择默认模版 ~~~  安装完成后的目录结构：  ### 三、安装sass ~~~js npm install node-sass@4.14.1 --save npm install sass-loader@8.0.0 --save // 注：node-sass和sass-loader安装需要制定版本，版本太高会不兼容，指定版本如安装不成功自行百度解决办法 ~~~ 安装成功后在package.json文件中查看  ### 四、替换src目录文件 1. 将新建的项目中的src文件里边的内容全部删掉； 2. 将之前hbuilder创建的项目中的文件拷贝到新建项目的src目录  ### 五、修改部分文件 由于之前在项目中引用了sacc和less两种css预处理器，在vue-cli中两种会冲突，所以需要把之前用到的less处理器的文件给修改为sass处理器。(以后开发uni-app项目只用sass即可，uni-app的插件市场的插件基本也都是使用的sass)  1. 将common目录下的page.less文件修改为page.scss  2. 将app.vue文件引用的page.less改为page.scss  3. 检查其他vue文件的样式声明（主要是pages目录下的页面）  如lang="less"都需要改为lang="sass" ### 六、运行项目 ~~~js npm run serve ~~~ ### 七、项目打包 ~~~js npm run build ~~~ ### 八、总结 ​ 由于安全管控app的子app较多，不需要一个一个创建，可创建一个标准的空项目，以该项目的package.json文件的依赖包为准，其他项目直接拷贝安装就行（保证各app的依赖包版本统一）。 1. 创建项目文件夹，拷贝标准项目模版，只拷贝红框内的文件。  2. 替换src文件内容。 3. 执行npm install安装依赖包。 4. 执行npm run serve运行项目。 5. 执行npm run build打包项目。